[英]Adding event listener to multiple elements using for loop and passing different parameters
<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的参数传递?
您可以简单地在循环中使用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>
您必须为点击回调创建一个隔离范围。
for(var i = 0; i < myArray.length; i++){
(function(i){
myArray[i].addEventListener("click", function(){myFunction(i);});
})(i);
}
使用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>
另外,您可以如下使用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'));
});
}
只需使用“ let”而不是“ var”,如下所示:
for(let i = 0; i < myArray.length; i++){
myArray[i].addEventListener("click", function(){myFunction(i);});
}
'let'允许您声明变量,其作用域仅限于使用它的块,语句或表达式。 这与'var'关键字不同,该关键字在全局范围内或整个函数本地定义变量,而与块范围无关。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.