javascript addEventListener无法正常工作

Stacy J 发表于 Dev

史黛西

我正在研究一些常见的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的值？

brk

当addEventListener添加到eventTarget正在处理for循环的那一刻时，它不会触发侦听器。

它是在稍后阶段触发的，此时，for-loop它已完成执行并更新了的值i。

当您在内部创建函数时，for-loop它会创建一个闭包并绑定的值i

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。