如何在循环中添加带有局部变量的事件处理程序

Question

我确定我曾经知道这一点，但我已经离开一段时间了，我再也想不通了。

假设我有一组按钮（"Button A"、"Button B"、"Button C"，由 .getElementsByClassName("button") 检索的 NodeList 表示。

我现在想向其中添加一个 EventHandler，它在创建处理程序时使用按值传递的一些局部变量。举一个最小的例子，让我们使用：

for (var i = elems.length - 1; i >= 0; i--) {
    var inner = elems[i].innerHTML;
    elems[i].onclick = function(){window.alert("Clicked on "+inner+" which is element number "+i)};
}

此处期望的结果是，当单击按钮 B 时，我得到

Clicked on Button B which is element number 1

但是，所有按钮都会屈服

Clicked on Button A which is element number -1

我明白为什么会这样，但我需要如何更改代码才能实现前者？如果这是相关的，在最终的事件处理程序中， i 将不会被自己使用，而是再次引用 elem[i] ，它作为参数传递给处理程序。

Answer 1

使用let声明变量。这将为变量创建一个块范围，并将在整个循环中保留正确的值：

for (let i = elems.length - 1; i >= 0; i--) {

演示：

let elems = document.querySelectorAll('button');
for (let i = elems.length - 1; i >= 0; i--) {
  var inner = elems[i].innerHTML;
  elems[i].onclick = function(){window.alert("Clicked on "+inner+" which is element number "+i)};
}

<button type="button">Button A</button>
<button type="button">Button B</button>
<button type="button">Button C</button>

Answer 2

var elems = document.getElementsByClassName('btn');
for (var i = elems.length - 1; i >= 0; i--) {
  (function(i) {
    var inner = elems[i].innerHTML;
    elems[i].onclick = function(){window.alert("Clicked on "+inner+" which is element number "+i)};
  })(i);
}

<button type="button" class="btn">Button A</button>
<button type="button" class="btn">Button B</button>
<button type="button" class="btn">Button C</button>

如何在循环中添加带有局部变量的事件处理程序

How to add eventHandlers with local variables in a loop

javascript

scope

dom-events

pass-by-value