イベントハンドラへのインデックス値のバインド

Question

ここでは、要素の配列を繰り返し処理し、各要素にイベントハンドラを設定し、現在のイテレータ値をそのイベントハンドラにバインドします。私は何を作ってみたことはある：

ここ

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

function foo(index) 
{ 
     alert(index); 
} 

私はfooにiをバインドするためにクロージャを使用しています。問題は、fooが実際に呼び出されたときに、iは、fooが呼び出されたときにはもちろん、elementArray.lengthに等しいことになります。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を使用する（またはそれをサポートしていないブラウザのための1つを定義する）（明示的）クロージャを避けるためにすることができます。

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