Javascriptで複数の要素にイベントをアタッチする

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に用意されている要素に追加しようとしているためです。

以下を使用して、あなたのコードはIEの古いバージョンのmyFunction()

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

内にある必要があり、それは使用しています：

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

Answer 2

をいくつかES6の矢印の機能を使用すると、forEachの

let imageElements = document.querySelectorAll("img[class^='image']"); 

imageElements.forEach(image => image.addEventListener('click', function(){ 
    definition(this.classList[0], this); 
});