首页 > web前端 > js教程 > 在循环中使用事件监听器时如何避免关闭问题?

在循环中使用事件监听器时如何避免关闭问题?

Susan Sarandon
发布: 2024-11-21 16:32:11
原创
875 人浏览过

How to Avoid Closure Issues When Using Event Listeners in a Loop?

在循环中使用事件监听器时避免关闭问题

在尝试使用 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 to run on click:

function makeItHappen(elem, elem2) {

  var el = document.getElementById(elem);

  el.style.backgroundColor = "red";

  var el2 = document.getElementById(elem2);

  el2.style.backgroundColor = "blue";

}

 

// Autoloading function to add the listeners:

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

  }()); // immediate invocation

}

登录后复制

通过使用 IIFE,您可以确保每个事件侦听器函数都有自己的作用域,从而防止关闭 问题。现在,每个事件侦听器将正确定位循环内的相应元素。

以上是在循环中使用事件监听器时如何避免关闭问题?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板