루프에서 이벤트 리스너를 사용할 때 클로저 문제를 방지하는 방법은 무엇입니까?

루프에서 이벤트 리스너를 사용할 때 종료 문제 방지

for 루프를 사용하여 이벤트 리스너를 여러 요소에 연결하려고 하면 모든 리스너가 마지막 개체를 대상으로 하는 문제가 발생했습니다. 이는 JavaScript에서 클로저가 작동하는 방식 때문입니다.

클로저 이해

함수가 범위 외부에 선언된 변수를 참조하는 경우에도 해당 변수에 대한 액세스를 유지합니다. 함수가 종료된 후. 귀하의 경우, 루프 외부에 정의된 루프 참조 boxa 및 boxb 내에 정의된 이벤트 리스너 함수입니다. 루프가 완료되면 이러한 변수는 루프의 마지막 요소를 가리킵니다.

문제 해결

이 종료 문제를 방지하려면 즉시 호출되는 함수를 사용할 수 있습니다. 루프 내부의 표현식(IIFE)입니다. IIFE는 새 범위를 생성하므로 그 안에 선언된 변수는 함수 외부에서 액세스할 수 없습니다.

수정된 코드

다음은 IIFE가 포함된 수정된 코드입니다.

// Function to run on click:
function makeItHappen(elem, elem2) {
  var el = document.getElementById(elem);
  el.style.backgroundColor = "red";
  var el2 = document.getElementById(elem2);
  el2.style.backgroundColor = "blue";
}

// 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
}

IIFE를 사용하면 각 이벤트 리스너 함수에 고유한 범위가 있는지 확인하여 폐쇄 문제. 이제 각 이벤트 리스너는 루프 내의 해당 요소를 올바르게 타겟팅합니다.

위 내용은 루프에서 이벤트 리스너를 사용할 때 클로저 문제를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!