JavaScript点击处理程序在 for 循环中不能正常工作（重复）

JavaScript 中的循环和事件处理程序是编写前端代码时经常使用的两个关键功能。然而，当将它们结合起来使用时，可能会出现一些问题，尤其是对于初学者来说。特别是当我们试图在一个 for 循环中为多个元素添加点击事件处理程序时，可能会遇到一些意想不到的结果。

问题描述

考虑以下示例代码，其中我们尝试在三个按钮上分别添加单击事件处理程序：

var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    console.log(i);
  });
}

这个代码看起来应该能够按照预期工作：每次单击一个按钮时，控制台都会输出相应的索引值。 然而，当我们测试这段代码时，却发现无论单击哪个按钮，控制台始终输出 “3”！

这种行为看起来很奇怪，但实际上有一个简单的解释 - 这是因为事件处理程序中的变量 i 是通过闭包捕获的。在 for 循环中，每次迭代都会创建一个新的闭包，并且每个闭包都使用相同的变量 i。由于事件处理程序不会立即执行，所以在处理程序执行时，for 循环已经完成并且 i 的值为 3。

解决方案

要解决这个问题，我们需要在循环中创建一个新的作用域，以便为每个按钮创建一个独立的闭包。一种常见的方法是使用立即调用函数表达式（IIFE）：

var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
  (function(index) {
    buttons[index].addEventListener("click", function() {
      console.log(index);
    });
  })(i);
}

现在，我们通过将 IIFE 包装在括号中并将变量 i 传递给它来为每个按钮创建一个新的闭包。这样，对于每个事件处理程序，都会使用其自己的索引值，而不是共享同一个变量。

结论

当编写前端代码时，很容易遇到像这样的陷阱和坑。了解闭包和作用域规则是避免这些问题的关键。同时，学习如何使用 IIFE 等技术可以帮助我们保持代码的清晰、易读和可维护性。

最后，建议在编写任何复杂的 JavaScript 代码之前先进行测试并仔细检查您的代码是否按照预期工作。如果出现问题，不要放弃，一定要仔细检查和排除错误。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10032