使用 for 循环向多个元素添加事件侦听器并传递不同的参数答案

【问题标题】：Adding event listener to multiple elements using for loop and passing different parameters使用 for 循环向多个元素添加事件侦听器并传递不同的参数
【发布时间】：2018-12-14 05:28:48
【问题描述】：

<div id="mydiv0"></div>
<div id="mydiv1"></div>
<div id="mydiv2"></div>


var myArray = [
  document.getElementById("mydiv0"),
  document.getElementById("mydiv1"),
  document.getElementById("mydiv2")
];

function myFunction(x){
  alert("my number is " + x);
}

for(var i = 0; i < myArray.length; i++){
  myArray[i].addEventListener("click", function(){myFunction(i);});
}

我想将事件侦听器附加到 myArray 中的每个元素。单击时，应显示一条警报消息，分别为 mydiv0、mydiv1 和 mydiv2 显示数字 0、1 和 2。如上例所示，我尝试使用 for 循环，但无论我点击哪个 div，我都会收到“我的号码是 3”消息。有没有办法将变量 i 的不同值作为 myFunction 的参数传递？

【问题讨论】：

标签： javascript addeventlistener

【解决方案1】：

您可以简单地在循环中使用 let 声明变量，而不是创建块作用域局部变量的 var。

var myArray = [
  document.getElementById("mydiv0"),
  document.getElementById("mydiv1"),
  document.getElementById("mydiv2")
];

function myFunction(x){
  alert("my number is " + x);
}

for(let i = 0; i < myArray.length; i++){
  myArray[i].addEventListener("click", function(){myFunction(i);});
}

<div id="mydiv0">Div 0</div>
<div id="mydiv1">Div 1</div>
<div id="mydiv2">Div 2</div>

【讨论】：

谢谢。与 wrapping 或 bind 相比，这种方式似乎更干净。
@GeorgeRistic，是的，你说得对。 bind 和 (function(){})() 是解决问题的旧方法，因为 let 是新功能.....

【解决方案2】：

您必须为点击回调创建一个隔离范围。

for(var i = 0; i < myArray.length; i++){
  (function(i){
    myArray[i].addEventListener("click", function(){myFunction(i);});
  })(i);
}

【讨论】：

【解决方案3】：

使用bind:

var myArray = [
  document.getElementById("mydiv0"),
  document.getElementById("mydiv1"),
  document.getElementById("mydiv2")
];

function myFunction(x){
  alert("my number is " + x);
}

for(var i = 0; i < myArray.length; i++){
  myArray[i].addEventListener("click", myFunction.bind(null, i));
}

div {
  height: 20px;
  width: 200px;
  border: 1px solid black;
}

<div id="mydiv0"></div>
<div id="mydiv1"></div>
<div id="mydiv2"></div>

【讨论】：

【解决方案4】：

或者，您可以使用 data 属性，如下所示。

<div id="mydiv0" data-value="1"></div>
<div id="mydiv1" data-value="2"></div>
<div id="mydiv2" data-value="3"></div>

for(var i = 0; i < myArray.length; i++){
    myArray[i].addEventListener("click",  function() {
        myFunction(this.getAttribute('data-value'));
    });
}

【讨论】：

【解决方案5】：

只需使用 'let' 而不是 'var' 如下：

for(let i = 0; i < myArray.length; i++){
    myArray[i].addEventListener("click", function(){myFunction(i);});
}

'let' 允许您声明范围限制在使用它的块、语句或表达式的变量。这与 'var' 关键字不同，后者在全局范围内定义变量，或者在本地定义整个函数，而不管块范围如何。

【讨论】：