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

我的代碼如何將事件添加到數組元素？

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的初始框）。

來源

2014-10-08 ogward

你知道，你的for循環只運行一次，對嗎？當頁面上'.box'元素的數量增加時，它不會重新運行。 JavaScript沒有內置的那種綁定。 – 2014-10-08 14:39:05

是的，我意識到這一點。我嘗試了一些其他的東西，但最終回到這個，因爲我不知道該怎麼做。 – ogward 2014-10-08 14:55:01

問題是您的代碼只附加了當前在DOM中加載的匹配的事件處理程序。如果這是在DOM負載上，那麼不會有「未來」元素附加該事件。

你可以聽一個靜態容器的雙擊（我已經去找了文檔）並且檢查目標元素是否有類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

來源

2014-10-08 14:41:24 George

你需要某種事件代表團。代之以做。

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

來源

2014-10-08 14:41:32

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

回答

相關問題