Javascript addEventListener 沒有按預期工作

Question

我正在研究一些常見的 Javascript 程序。 下面的代碼向 DOM 添加了 4 個按鈕，並為每個按鈕添加了一個事件監聽器：

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

功能 1 和功能 2 都向按鈕添加了事件偵聽器並且完美運行。 我想知道，為什么下面的代碼沒有：-

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

如果您使用var Javascript 沒有塊作用域。 因此，完全使用您的代碼，您可以將var替換為let的“預期結果”：

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

Answer 2

在處理for循環時將addEventListener添加到eventTarget時，它不會觸發偵聽器。

它在后期觸發，此時for-loop已完成執行並更新i的值。

當您在for-loop內創建函數時for-loop它會創建一個閉包並綁定i的值