addEventListenerにイベントを渡すことができません：closure issue

Question

これは私を夢中にしています...私はイベントリスナーをSVGオブジェクトに追加するループを持っています。オブジェクトは引数のために小さな円です.10個の円ごとにマウスオーバーイベントとマウスアウトイベントを追加する必要があります。

最初の問題は、すべてのリスナーが同じループに追加されているため、ループ変数の同じ無効な値がすべて表示されるためです。私はこれを修正することができますが、第2の問題は、リスナーに「イベント」を渡す必要があることです。これらの問題を同時に解決する方法はありません。

私はこれのさまざまなバージョンを試してみた：

for(month = 0; month < nMonths; month++) { 
    ... 
    shape.addEventListener(
    "mouseover", 
    (function(event, index) { popup_on(event, foo, index); })(event, month), 
    false); 
    group.appendChild(shape); 
} 

この特定のバージョンは、「イベントが定義されていない」私を与えます。 popup_onは実際のハンドラであり、eventと現在の値monthを取得する必要があります。どのように私はこれを行う必要がありますか？ありがとう。

Answer 1

イベントはあなたの関数に自動的に渡されます- addEventListenerに渡す関数の最初の引数にします。また、falseはキャプチャパラメータのデフォルト値です。

(function() { 
    var i = month; 
    shape.addEventListener("mouseover", function(e) { popup_on(e, foo, i); }); 
})(); 

また、イベントコールバックでfooが閉じられても問題ありませんか？そうでない場合、あなたはそれ

(function() { 
    var i = month; 
    var f = foo; 
    shape.addEventListener("mouseover", function(e) { popup_on(e, f, i); }); 
})(); 

と同じことを行う可能性があり、これらすべてのローカル変数は迷惑になっている場合、あなたは彼らにおそらくあることが

(function(i, f) { 
    shape.addEventListener("mouseover", function(e) { popup_on(e, f, i); }); 
})(month, foo);