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

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

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

Fiddle

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

Answer 3

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

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

但这不适用于IE＆lt; 9。

for循环中有多个不同的事件侦听器

3 个答案: