범위 충돌 없이 여러 개체에 이벤트 리스너를 할당하는 방법은 무엇입니까?

반복 함수를 사용한 이벤트 리스너 할당

루프를 사용하여 여러 객체에 이벤트 리스너를 추가하는 경우 모든 리스너가 동일한 개체, 일반적으로 루프의 마지막 개체입니다. 이는 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);
  }());
}

이 코드에서는 익명 함수가 내부 범위, 각 반복에 대한 클로저를 생성합니다. '()' 연산자를 사용하여 함수를 즉시 실행하면 각 반복에 자체 비공개 범위가 있어 내부 변수와 함수가 다른 반복의 변수와 함수를 방해하지 않습니다.

이 접근 방식은 각 이벤트 리스너에 권한을 부여합니다. 의도한 변수에 액세스하여 동일한 객체를 대상으로 하는 모든 리스너의 문제를 해결합니다.

위 내용은 범위 충돌 없이 여러 개체에 이벤트 리스너를 할당하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!