addEventListener()に指定する無名関数に､引数を変数で渡したい以下の関数 addListener4Element は､load後に､loadｲﾍﾞﾝﾄﾘｽﾅｰに登録します｡この関数内で､3つの…

addEventListener()に指定する無名関数に､引数を変数で渡したい

以下の関数 addListener4Element は､load後に､loadｲﾍﾞﾝﾄﾘｽﾅｰに登録します｡
この関数内で､3つのﾀｰｹﾞｯﾄ要素 elem1, elem2, elem3 にmouseoverｲﾍﾞﾝﾄﾘｽﾅｰを
登録していますが､
関数内で使用されている変数 i をｲﾍﾞﾝﾄﾘｽﾅｰの引数として渡したいと
思っています｡
function addListener4Element() {

var elem1 = document.getElementById("target1");
var elem2 = document.getElementById("target2");
var elem3 = document.getElementById("target3");

for (var i=1; i <= 3; i++) {

if (eval("elem"+i).attachEvent){
eval("elem"+i).attachEvent('onmouseover', function(){ showPopupElement(i);});
}
else if (eval("elem"+i).addEventListener){
eval("elem"+i).addEventListener('mouseover', function(){ showPopupElement(i);}, false);
}
}
}

function showPopupElement(num) {
console.debug(num)
/* 省略 */
}

しかし､関数 showPopupElement にconsole.debug を仕込ませて､引数 i の値をFirebug
で確認しました｡各3つの要素にﾏｳｽを当てて､値を確認しましたら､
いずれの要素でも値は､4 しか渡されません｡

それぞれ3つのmouseoverｲﾍﾞﾝﾄﾘｽﾅｰに､順番に 1,2,3 の値を渡すには､どのように
したら良いでしょうか？

以下のくだりを､

eval("elem"+i).addEventListener('mouseover', function(){ showPopupElement(i);}, false);

こんな感じに変更です｡

var f = (function() {
 var ii = i;
 return function(){ showPopupElement(ii);}
 })();
eval("elem"+i).addEventListener('mouseover', f, false);

分りやすいように､変数 f を使ってますが､addEventListener の引数に直接書いても OK です｡

それをふまえて､三回ﾙｰﾌﾟする部分が､こうなります｡

for (var i=1; i <= 3; i++) {

 var f = (function() {
 var ii = i;
 return function(){ showPopupElement(ii);}
 })();

 if (eval("elem"+i).attachEvent){
 eval("elem"+i).attachEvent('onmouseover', f);
 }
 else if (eval("elem"+i).addEventListener){
 eval("elem"+i).addEventListener('mouseover', f, false);
 }
}