正在将索引值绑定到事件处理程序

Binding index value to event handler

本文关键字：事件处理 程序 绑定 索引值      更新时间：2023-09-26

这里我的意图是迭代一个元素数组，并在每个元素上设置一个事件处理程序，同时将当前迭代器值绑定到该事件处理程序。我想到的是：

for (var i = 0; i < elementArray.length; ++i)
{
      var elem = elementArray[i];
      elem.onmouseover = function() { foo(i); }
}
function foo(index)
{
       alert(index);
}

在这里，我使用闭包将i绑定到foo。问题是，当实际调用foo时，i总是等于elementArray.length，因为当然，当调用foo时i已经增加到最大值。我想，我在这里想要的是将i的一个新副本绑定到每个匿名函数，以便它将正确的值传递给foo。但我不确定最好的方法是什么。

这对您不起作用，因为当调用mouseover处理程序时，i的值已经更改，等于elementArray.length。相反，您应该返回一个函数，该函数创建一个闭包，并在定义它时保持i的值。

for (var i = 0; i < elementArray.length; ++i)
{
      var elem = elementArray[i];
      elem.onmouseover = foo(i);
}
function foo(index)
{
    return function(){
       alert(index);
    }
}

您可以使用Function.prototype.bind（或为不支持它的浏览器定义一个）来避免（显式）闭包。然后你的电话会写为：

elem.onmouseover = function(x) { foo(x); }.bind(this, i);
相关文章：