![How to Avoid Closure Issues When Using Event Listeners in a Loop?](https://img.php.cn/upload/article/000/000/000/173217796088156.jpg)
在循环中使用事件监听器时避免关闭问题
在尝试使用 for 循环将事件监听器附加到多个元素时,您遇到过所有侦听器最终都瞄准最后一个对象的问题。这是由于 JavaScript 中闭包的工作方式所致。
理解闭包
当函数引用在其作用域之外声明的变量时,它甚至会保留对该变量的访问权限函数退出后。在您的情况下,循环引用 boxa 和 boxb 中定义的事件侦听器函数是在循环外部定义的。循环完成后,这些变量指向循环中的最后一个元素。
修复问题
要避免此闭包问题,您可以使用立即调用的函数循环内的表达式 (IIFE)。 IIFE 创建一个新的作用域,因此在函数外部无法访问其中声明的变量。
修订后的代码
以下是已就位 IIFE 的修订后代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | function makeItHappen(elem, elem2) {
var el = document.getElementById(elem);
el.style.backgroundColor = "red" ;
var el2 = document.getElementById(elem2);
el2.style.backgroundColor = "blue" ;
}
var elem = document.getElementsByClassName( "triggerClass" );
for ( var i = 0; i < elem.length; i += 2) {
( function () {
var k = i + 1;
var boxa = elem[i].parentNode.id;
var boxb = elem[k].parentNode.id;
elem[i].addEventListener( "click" , function () {
makeItHappen(boxa, boxb);
}, false);
elem[k].addEventListener( "click" , function () {
makeItHappen(boxb, boxa);
}, false);
}());
}
|
登录后复制
通过使用 IIFE,您可以确保每个事件侦听器函数都有自己的作用域,从而防止关闭 问题。现在,每个事件侦听器将正确定位循环内的相应元素。
以上是在循环中使用事件监听器时如何避免关闭问题?的详细内容。更多信息请关注PHP中文网其他相关文章!