Question

我正在尝试向多个元素添加一个事件，现在我有了这个代码，它可以工作，但我不想添加一个SetTimeout。如果我拿走它，它就不起作用。

你知道为什么会这样吗？有更好的解决方案吗？

setTimeout(function () {
    var imageElements = document.querySelectorAll("img[class^='image']");
    for (var i = 0; i < imageElements.length; i++) {
        imageElements[i].addEventListener("click" , function(){
            definition(this.classList[0], this);
        })
    }
},200);

Answer 1

因为您正在尝试将事件处理程序添加到尚未在DOM中创建或准备好的元素中。

使用以下内容，您的代码应位于myFunction()

中

window.addEventListener('load', myFunction, false )

对于旧版本的IE，它使用：

document.attachEvent("onreadystatechange", myFunction);
//or
window.attachEvent("onload", myFunction);

Answer 2

使用一些ES6箭头功能和forEach

article {
  display: grid;
  grid-template-columns: repeat(12, 75px);
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

section:nth-child(1) {
  grid-column: 1 / 4;
  grid-row: 1;
}

section:nth-child(2) {
  grid-column: 1 / span 3;
  grid-row: 2;
}

/* non-essential demo styles */
section {
  background-color: lightgreen;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

通过Javascript将事件附加到多个元素

2 个答案: