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

Question

这里我的目的是迭代元素数组，并在每个元素上设置事件处理函数，同时还将当前迭代器值绑定到该事件处理函数。我想出来的是：

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。但我不确定要做到这一点的最佳方法是什么。

Answer 1

这不是为你工作，因为由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); 
    } 
} 

Answer 2

可以使用Function.prototype.bind（或定义为一个不支持它的浏览器），以避免（明确的）封锁。然后你的电话会写成：

elem.onmouseover = function(x) { foo(x); }.bind(this, i); 

elem.onmouseover = function(x) { foo(x); }.bind(this, i);