在for循环中创建的Javascript多个动态addEventListener - 传递参数不起作用 [英] Javascript multiple dynamic addEventListener created in for loop - passing parameters not working

问题描述

我想使用事件侦听器来防止带有 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><脚本>函数 doMouseClick(peram1, peram2, peram3){alert("doMouseClick() 调用 AND peram1 = "+peram1+" AND peram2 = "+peram2+" AND peram3 = "+peram3);}

但是，我尝试使用以下方法在循环中创建多个事件侦听器:

<div id="button_id_1"></div><div id="button_id_2"></div><脚本>函数 doMouseClick(peram1, peram2, peram3){alert("doMouseClick() 调用 AND peram1 = "+peram1+" AND peram2 = "+peram2+" AND peram3 = "+peram3);}var 名称 = ['button_id_0', 'button_id_1', 'button_id_2'];for (var i=0; i

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

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

解决方案

问题是闭包，因为 JS 没有块作用域(只有函数作用域) i 不是你想的那样，因为事件函数会创建另一个作用域，因此当您使用 i 时，它已经是 for 循环中的最新值.您需要保留 i 的值.

使用 IIFE:

for (var i=0; i

使用forEach:

names.forEach(function( v,i ) {//i 可以在这个范围内的任何地方使用});

I want to use event listeners to prevent event bubbling on a div inside a div with onclick functions. This works, passing parameters how I intended:

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

However, I tried to create multiple event listeners in a loop with this:

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

It correctly assigns the click function to each div, but the first parameter for each, peram1, is 3. I was expecting 3 different event handlers all passing different values of i for peram1.

Why is this happening? Are the event handlers not all separate?

解决方案

Problem is closures, since JS doesn't have block scope (only function scope) i is not what you think because the event function creates another scope so by the time you use i it's already the latest value from the for loop. You need to keep the value of i.

Using an IIFE:

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

Using forEach:

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

这篇关于在for循环中创建的Javascript多个动态addEventListener - 传递参数不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！