onmouseover ForループでのイベントJavaScriptサブルーチン不正な引数

Question

私はforループと配列を持っています。その配列の各要素にはボタンがあります。すべてのボタンにはonmouseoverというイベントがあります。

注：コードは私のポイントを作るために簡略化されています。 doSomethingは一つのパラメータを受け入れ

for(i = 0; i < array.length; i++){ 
    var button = document.createElement("button"); 
    button.onmouseover = function() {doSomething(i)}; 
} 

、i。

カーソルがbutttonsのいずれか、doSomethingに供給される引数にカーソルを合わせない - iは関係なく、カーソルが上をホバリングしているボタンの、常にarrayの長さです。なぜこれが起こるのですか、関数に正しい引数が供給されるようにするにはどうすればよいですか？

Answer 1

変数にはバインドしていますが、その値はバインドしていません。私。すべての関数がiの新しい変数ではなく、同じ変数iを使用するクロージャを作成しました。

あなたが行う必要があるのは、その値をロックすることです。これを行う方法の1つは、ファンクションジェネレータを作成し、それを現在の値iで呼び出すことです。例えば。

for(i = 0; i < array.length; i++){ 
    var button = document.createElement("button"); 
    button.onmouseover = function(inner_i) { return function(){doSomething(inner_i)} }(i); 
}