我的代码
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 个初始盒子)。最佳答案
问题是您的代码仅附加当前在 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 时附加事件处理程序。
关于javascript - 如何向数组元素添加事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26259577/