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