JavaScript에서 이벤트 핸들러를 동적으로 생성할 때 클로저 문제를 피하는 방법은 무엇입니까?

Javascript에서 루프를 사용하여 동적으로 이벤트 핸들러를 생성하는 방법

특정 시나리오에서는 일련의 요소에 이벤트 핸들러를 할당해야 합니다. Javascript를 통해 동적으로 생성되며 종종 "이벤트 핸들러를 통한 루프"라고도 합니다. 이 문제는 인라인 이벤트 핸들러를 사용하는 것과 달리 생성된 요소가 유사한 기능을 갖고 고유한 동작을 가진 이벤트 핸들러를 요구할 때 발생합니다.

10개의 AJAX 응답에서 생성된 태그가 있고 루프의 각 태그에 onclick 이벤트를 할당하려고 합니다. 다음 코드는 간단한 해결책처럼 보입니다.

for (i = 1; i < 11; i++) {
  document.getElementById("b" + i).onclick = function () {
    alert(i);
  };
}

그러나 실행 시 이 코드는 onclick 이벤트를 마지막 태그를 추가하고 모든 클릭에 대해 경고 상자에 '11'을 표시합니다. 이러한 동작의 이유는 모든 이벤트 핸들러가 동일한 i 변수를 공유한다는 사실에 있습니다. 이 변수는 루프에서 증가하고 최종적으로 마지막으로 생성된 태그.

이 문제를 해결하고 각 태그에는 고유한 이벤트 핸들러가 있으므로 각 핸들러에 대해 별도의 함수를 정의하고 i 값을 매개변수로 전달해야 합니다. 이렇게 하면 각 핸들러는 의도한 기능을 유지하면서 i 변수의 자체 인스턴스를 갖게 됩니다.

function handleElement(i) {
  document.getElementById("b" + i).onclick = function () {
    alert(i);
  };
}

for (i = 1; i < 11; i++) {
  handleElement(i);
}

이 수정된 코드는 각 태그가 있고 태그를 클릭하면 예상되는 동작을 반영하여 올바른 i 값이 경고 상자에 표시됩니다. 이 기술을 사용하면 일련의 요소에 대한 이벤트 핸들러를 동적으로 생성하여 각 개별 요소에 대한 이벤트를 적절하게 처리할 수 있습니다.

위 내용은 JavaScript에서 이벤트 핸들러를 동적으로 생성할 때 클로저 문제를 피하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!