javascript - 为所有子项添加事件监听器

Question

我有一个按钮，单击该按钮时会调用一个函数，该函数创建 div 并将它们作为子元素添加到充当容器的另一个 div 中。

我在函数末尾尝试了这个:

x = document.getElementById("box_area").childNodes;
x[x.length-1].addEventListener("click",alert("test"),false) //to add a listener to the div just created.

当单击按钮时，该函数会在单击按钮时触发，而不是在单击 div 时触发。

知道如何向每个动态 div 添加事件监听器，因为我的不工作。

Answer 1

尝试:

x[x.length-1].addEventListener("click", function () {
    alert("test");
}, false);

请注意，第二个参数是对匿名函数的引用。之前，当执行此行时，您会立即调用 alert，而不是完成您真正想要的。

这是一个示例，基本上使用您提供的内容:http://jsfiddle.net/8Q63G/

还有一个更好的例子，通过共享函数:http://jsfiddle.net/8Q63G/1/

虽然要支持所有浏览器，但您应该使用类似以下内容的内容:

window.onload = function () {
    x = document.getElementById("box_area").childNodes;
    for (var i = 0; i < x.length; i++) {
        //x[i].addEventListener("click", boxClicker, false);
        addEvent(x[i], "click", boxClicker);
    }
};

function addEvent(element, event_name, func) {
    if (element.addEventListener) {
        element.addEventListener(event_name, func, false); 
    } else if (element.attachEvent)  {
        element.attachEvent("on"+event_name, func);
    }
}

function boxClicker() {
    console.log(this.innerHTML);
}

http://jsfiddle.net/8Q63G/3/

虽然还有几个选项。您可以向“box_area”元素添加一个事件，然后检查该事件的target和/或srcElement属性以查看它是否是一个你正在寻找的 child 。另外，您可以在将元素添加到 DOM 之前附加事件 - 这与我的解决方案相同，只是它不需要您访问 .childNodes并获取最后一项。