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

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

在尝试使用 for 循环将事件监听器附加到多个元素时，您遇到过所有侦听器最终都瞄准最后一个对象的问题。这是由于 JavaScript 中闭包的工作方式所致。

理解闭包

当函数引用在其作用域之外声明的变量时，它甚至会保留对该变量的访问权限函数退出后。在您的情况下，循环引用 boxa 和 boxb 中定义的事件侦听器函数是在循环外部定义的。循环完成后，这些变量指向循环中的最后一个元素。

修复问题

要避免此闭包问题，您可以使用立即调用的函数循环内的表达式 (IIFE)。 IIFE 创建一个新的作用域，因此在函数外部无法访问其中声明的变量。

修订后的代码

以下是已就位 IIFE 的修订后代码：

// 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中文网其他相关文章！