javascript - 如何向数组元素添加事件？

Question

我的代码

var boxes = document.getElementsByClassName("box");
for(var i=0; i<boxes.length;i++)
{
    boxes[i].addEventListener("dblclick", function(e){
        this.classList.add("animateSize");
        this.style.width="2px";
        this.style.height="2px";
        window.setTimeout(2000);
    });
}

最初我只有一个框，然后创建更多框，但是当我双击任何新创建的框时没有任何反应，只有当我双击初始框时才会触发事件。

我做错了什么？

PS。当我在创建后发出警报(boxes.length)时，比如说 4 个盒子，我得到了正确的警报长度(5=4 + 1 个初始盒子)。

Answer 1

问题是您的代码仅附加当前在 DOM 中加载的匹配的事件处理程序。如果这是在 DOM 加载上，则任何“ future ”元素都不会附加该事件。

您可以监听静态容器上的双击(我已经找到文档)并检查目标元素是否具有类 box。如果是这样，请执行您的代码:

document.addEventListener("dblclick", function(e){
    if(e.target.classList.contains('box')){
        var box = e.target;
        box.classList.add("animateSize");
        box.style.width="2px";
        box.style.height="2px";
        window.setTimeout(2000);
    }
});

也称为事件委托(delegate)。

请注意，您需要更改 document 以获取最接近的静态容器。

当然还有其他方法，例如每次将节点添加到 DOM 时附加事件处理程序。

JSFiddle