javascript addEventListenerが期待どおりに機能しない

Question

私はいくつかの一般的なjavascriptプログラムを探しています。以下の1は1と機能2は、ボタンにイベントリスナーを追加し、完璧に動作の両方の機能

for(var i =0;i<5;i++){ 
    var btn = document.createElement('button'); 
    btn.appendChild(document.createTextNode('Button' + i)); 

    //function 1 
    (function(i){ 
    btn.addEventListener('click', function(){console.log(i)}); 
    })(i); 

    //function 2 commented 
    /*btn.addEventListener('click', (function(i){ 
    return function(){ 
    console.log(i); 
    } 
    })(i));*/ 

    document.body.appendChild(btn); 
} 

DOMに4つのボタンを追加し、それらのそれぞれにイベントリスナーを追加します。私は知りたいのですが、なぜ次のコードはそうしないのですか？ -

for(var i =0;i<5;i++){ 
    var btn = document.createElement('button'); 
    btn.appendChild(document.createTextNode('Button' + i)); 

    btn.addEventListener('click', function(){ 
     console.log('Clicked' + i); 
    }); 
    document.body.appendChild(btn); 
} 

このコードは、クリックするたびに5つのログを記録します。それはなぜですか、なぜ私は各ループのiの値を保持していないのか分かりません。

Answer 1

は、それがない：だから、正確にあなたのコードを使用して、あなたは「期待結果」letためvarを交換することができますリスナーを起動しません。

それは後の段階でトリガーされ、その時点でfor-loopは実行を終了し、iの値を更新しました。私の地元の値が期待される結果と合同であるので、あなたは、それがクロージャを作成し、それをすぐに実行クロージャを作成し、両方のあなたの例では

Answer 2

varを使用すると、Javascriptにブロックスコープがありません。それはforループを処理している間にaddEventListenerがeventTargetに追加され

for(let i =0;i<5;i++){ 
 
    var btn = document.createElement('button'); 
 
    btn.appendChild(document.createTextNode('Button' + i)); 
 

 
    btn.addEventListener('click', function(){ 
 
     console.log('Clicked' + i); 
 
    }); 
 
    document.body.appendChild(btn); 
 
}