JavaScript ループのイベント リスナーが常に最後の要素をターゲットにするのはなぜですか?

ループ内のイベント リスナーの動作を理解する

JavaScript では、イベント リスナーにより要素がユーザー アクションに応答できるようになります。ループを使用してイベント リスナーを複数のオブジェクトに追加すると、リスナーの機能に関する懸念が生じる可能性があります。

従来のアプローチの問題

次の状況を考えてみましょう。 「コンテナ」クラス内の複数の要素に対するイベント リスナーをクリックします。ただし、従来の for ループを使用すると、すべてのリスナーがループ内の最後の要素をターゲットにすることになることがわかります。

理由: クロージャ

この動作が発生します。 JavaScript の閉鎖が原因です。ループ内で変数を割り当てると、それらは同じメモリ位置を参照します。したがって、イベント リスナー関数でこれらの変数にアクセスしようとすると、常に最後の反復の値が参照されます。

解決策: 即時呼び出し

これを解決するにはこの問題が発生した場合は、ループ内で即時呼び出しを使用してください。これにより、反復ごとに新しい実行コンテキストを作成し、そのコンテキスト内の変数がローカルなままとなり、ループ変数にバインドされないようにすることができます。

修正コード:

以下の修正されたコードは、即時呼び出しを利用して目的の動作を実現します。

// Autoloading function to add the listeners:
var elem = document.getElementsByClassName("triggerClass");

for (var i = 0; i < elem.length; i += 2) {
    (function () {
        var k = i + 1;
        var boxa = elem[i].parentNode.id;
        var boxb = elem[k].parentNode.id;
        elem[i].addEventListener("click", function() { makeItHappen(boxa,boxb); }, false);
        elem[k].addEventListener("click", function() { makeItHappen(boxb,boxa); }, false);
    }()); // immediate invocation
}

この修正されたコードでは、即時呼び出し呼び出しにより、反復ごとに新しい実行コンテキストが作成され、boxa 変数と boxb 変数がイベント リスナー関数内で適切な値を維持できるようになります。

以上がJavaScript ループのイベント リスナーが常に最後の要素をターゲットにするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。