For ループ内のイベント リスナーが最後のオブジェクトをターゲットにするのはなぜですか?

addEventListener For ループの使用と値の受け渡し

for ループを使用してイベント リスナーを複数のオブジェクトに追加すると、最後のオブジェクトが次のようになります。すべてのリスナーの再配置のターゲット。この記事では、この問題を解決し、クロージャを使用して修正されたコードを提供します:

問題の概要:

ループを使用して複数のオブジェクトにイベント リスナーを追加しようとしていますが、最終的にはすべてのリスナーは同じオブジェクト (最後のオブジェクト) をターゲットとします。

修正コード:

クローズはこのような問題を防ぐ方法です。変更されたコードは次のとおりです:

// 函数在点击时运行：
function makeItHappen(elem, elem2) {
    var el = document.getElementById(elem);
    el.style.backgroundColor = "red";
    var el2 = document.getElementById(elem2);
    el2.style.backgroundColor = "blue";
}

// 自动加载函数以添加侦听器：
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);
    }()); // 立即调用
}

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