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