0

さて、私はこれを次のjavaScriptコードで取得しました。

function test(id)
{
alert(id);
}


var elem = document.getElementsByClassName('outsideDiv');

for(var i=0; i < elem.length; i++)
{
elem[i].addEventListener('mouseover', function(){test(i);}, false);
}

これにより、クラスを持つすべてのdivにマウスが表示されますが、関数は常に最新のiインデックスを返します。この場合、私は5つのdiv要素を取得し、アラートは常に5つです。誰かが理由を説明できますか？

4

1 に答える 1

1

代わりにこれを使用してみてください：

function mouseOverFunc(i) {
    return function () {
        test(i);
    };
}

function test(id) {
    alert(id);
}

var elem = document.getElementsByClassName('outsideDiv');

for(var i=0; i < elem.length; i++) {
    elem[i].addEventListener('mouseover', mouseOverFunc(i), false);
}

i要素にイベントリスナーを追加したからといって、の値がリスナーごとに保持されるわけではありません。で新しいスコープを作成するクロージャを作成する必要がありますi。

これが発生する理由は、各リスナーにバインドされた関数が単なる参照であるためです。イベントが発生すると（マウスオーバー）、関数が最終的に呼び出されますが、値はi何ですか？forループはかなり前に実行を終了したため、の値はi終了値です- 5。

于 2012-12-12T18:59:51.837 に答える