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);
    }
});

也称为事件委托。

请注意，您希望更改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
});

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

2 个答案: