JS 在 for 中创建事件总是获取最后一个 id

在使用 JavaScript 在 for 循环中创建事件时，可能会遇到一个问题，就是在绑定事件时只能获取到最后一个元素的 id，而无法获取到其他元素的 id。这是因为 JavaScript 中的变量作用域问题造成的。

问题分析

考虑以下代码片段：

for (var i = 0; i < 5; i++) {
  var btn = document.createElement("button");
  btn.innerHTML = "Button " + i;
  btn.addEventListener("click", function() {
    alert("This is button " + i);
  });
  document.body.appendChild(btn);
}

该代码片段创建了 5 个按钮，并为这些按钮添加了点击事件。事件内容是弹出一个提示框，其中显示当前按钮的编号。但是运行该代码后，点击任何一个按钮都只会显示 "This is button 5"。

这是因为事件处理函数是在点击按钮时才会被执行，而此时 for 循环已经执行完毕，变量 i 的值已经被更新为 5。因此，无论点击哪个按钮，都只能获取到变量 i 的最终值。

解决方法

为了解决这个问题，可以使用 JavaScript 中的闭包来限定变量的作用域。将事件处理函数定义为一个匿名函数，并将变量 i 作为参数传入该函数：

for (var i = 0; i < 5; i++) {
  var btn = document.createElement("button");
  btn.innerHTML = "Button " + i;
  (function(i) {
    btn.addEventListener("click", function() {
      alert("This is button " + i);
    });
  })(i);
  document.body.appendChild(btn);
}

在这个代码片段中，我们使用了一个立即执行函数来创建一个新的作用域，并将变量 i 作为参数传入该函数。这样，点击不同的按钮时，事件处理函数就能够正确地获取到相应的变量 i 了。

总结

为了避免在循环中创建事件时出现变量作用域问题，可以使用闭包来创建一个新的作用域，并将循环变量作为参数传入该函数。这样，就可以正确地获取到每个元素的 id，从而避免出现无法预料的错误。