在for循环中创建的Javascript多动态addEventListener - 传递参数不起作用

Question

我想使用事件监听器来防止事件在具有onclick函数的div内的div上冒泡.这工作,传递参数我的意图:

<div onclick="doMouseClick(0, 'Dog', 'Cat');" id="button_id_0"></div>
<div onclick="doMouseClick(1, 'Dog', 'Cat');" id="button_id_1"></div>
<div onclick="doMouseClick(2, 'Dog', 'Cat');" id="button_id_2"></div>

<script>
function doMouseClick(peram1, peram2, peram3){
    alert("doMouseClick() called AND peram1 = "+peram1+" AND peram2 = "+peram2+" AND peram3 = "+peram3);
}
</script>

但是,我尝试在循环中创建多个事件侦听器:

<div id="button_id_0"></div>
<div id="button_id_1"></div>
<div id="button_id_2"></div>

<script>
function doMouseClick(peram1, peram2, peram3){
    alert("doMouseClick() called AND peram1 = "+peram1+" AND peram2 = "+peram2+" AND peram3 = "+peram3);
}

var names = ['button_id_0', 'button_id_1', 'button_id_2'];

    for (var i=0; i<names.length; i++){

        document.getElementById(names[i]).addEventListener("click", function(){
        doMouseClick(i, "Dog", "Cat");

    },false);

}

</script>

它正确地将click函数分配给每个div,但每个div的第一个参数peram1是3.我期待3个不同的事件处理程序都传递不同的ifor 值peram1.

为什么会这样？事件处理程序不是全部分开吗？

Answer 1

问题是关闭的,因为JS没有块范围(仅适用于功能范围)i是不是你的想法,因为这样你的时间使用事件函数创建另一个范围i它已经从最新的价值for循环.你需要保持价值i.

使用IIFE:

for (var i=0; i<names.length; i++) {
  (function(i) {
    // use i here
  }(i));
}

使用forEach:

names.forEach(function( v,i ) {
  // i can be used anywhere in this scope
});