如何将事件添加到数组元素？

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负载上进行的，则没有“未来”元素将附加事件。

您可以侦听双击静态容器（我去过文档），然后检查以查看目标元素是否具有class 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);
    }
});

也称为事件委托。

请注意，您想更改document以使其最接近容器的静态容器。

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

JSFiddle

Answer 2

您需要某种事件委托。 改为这样做。

var parentElem = document.getElementsByClassName("box")[0].parentNode;
parentElem.attachEventHandler("dblclick", function(e) {
    var that = e.target;
    that.classList.add("animateSize");
    that.style.width = "2px";
    // (...) More code
});