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 중국어 웹사이트의 기타 관련 기사를 참조하세요!