如何將事件添加到數組元素？

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