在 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>

它正确地将点击功能分配给每个 div，但每个的第一个参数 peram1 是 3。我期待 3 个不同的事件处理程序都为 peram1 传递不同的 i 值。

为什么会这样？事件处理程序不都是独立的吗？

Answer 1

问题是闭包，因为 JS 没有 block 作用域(只有函数作用域) 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
});