將索引值綁定到事件處理程序

這裏我的目的是迭代元素數組，並在每個元素上設置事件處理函數，同時還將當前迭代器值綁定到該事件處理函數。我想出來的是：將索引值綁定到事件處理程序

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。但我不確定要做到這一點的最佳方法是什麼。

來源

2012-02-22 Channel72

不，你不使用閉包，或者至少不夠他們:-) for循環的'{}'做**不* *創建一個新的變量範圍。 JavaScript中唯一能做到的就是一個函數。 – Pointy 2012-02-22 17:08:48

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

來源

2012-02-22 17:10:37 ggreiner

可以使用Function.prototype.bind（或定義爲一個不支持它的瀏覽器），以避免（明確的）封鎖。然後你的電話會寫成：

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

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

來源

2012-02-22 17:12:58

將索引值綁定到事件處理程序

回答

相關問題