javascript - for循环中有多个不同的事件监听器

Question

下面的代码总是返回 undefined。为什么是这样？我希望事件侦听器以索引的字符串进行响应。

谢谢

var array = ["Hey", "Hi", "Hello"];

for (var i = 0; i < array.length; i++) {
  var box = document.createElement("div");
  box.className = "box";
  box.addEventListener("click", function() {
    alert(array[i]);
  }, false);
}

Answer 1

这是经常被问到的。JavaScript 没有块作用域。变量作用域仅在您调用函数时创建。因此，要将您i的范围限定为当前循环迭代，您需要在还创建处理程序的函数调用中引用它。

// Create a function that returns a function
function createHandler(i) {
    // The value of `i` is local to this variable scope

    // Return your handler function, which accesses the scoped `i` variable
    return function() {
        alert(array[i]);
    }
}

---

var array = ["Hey", "Hi", "Hello"];

for (var i = 0; i < array.length; i++) {
  var box = document.createElement("div");
  box.className = "box";

  // Invoke the `createHandler`, and pass it the value that needs to be scoped.
  // The returned function will use its reference to the scoped `i` value.
  box.addEventListener("click", createHandler(i), false);
}

---

我强烈建议您为此使用命名函数，而不是流行的内联函数调用。它可能更有效，并且函数名称提供了有关函数用途的文档。

Answer 2

您需要将点击处理程序包装在一个闭包中，以创建以下内容的本地副本i：

box.addEventListener("click", (function(i) { 
  return function() {
    alert(array[i]);
  }
})(i), false);

小提琴

您的代码现在的方式i最终值为 3，array[3]当然是未定义的。以上创建了 3 个副本，i其值为 0、1、2。

Answer 3

可能最简单的解决方案是：

box.addEventListener("click", alert.bind(window, array[i]), false);

但这在 IE<9 中不起作用。