루프를 사용하여 JavaScript에서 동적으로 생성된 요소에 이벤트 핸들러를 올바르게 할당하는 방법은 무엇입니까?

Javascript에서 루프를 사용한 이벤트 핸들러 생성

동적 웹 페이지로 작업할 때 이벤트 핸들러를 여러 요소에 할당해야 하는 경우가 많습니다. 프로그래밍 방식으로 생성됩니다. 이는 루프를 사용하여 효율적이고 중앙 집중화된 처리를 보장함으로써 달성할 수 있습니다.

한 가지 일반적인 시나리오는 AJAX 응답에서 여러 앵커 태그(a)를 생성하는 것입니다. 여기서 각 태그에는 해당 번호를 경고하는 onclick 이벤트가 필요합니다. . 그러나 다음과 같은 순진한 루프 접근 방식은 의도한 대로 작동하지 않을 수 있습니다.

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

이 예에서는 모든 이벤트 핸들러가 동일한 변수 i를 공유하므로 마지막 핸들러가 이전 핸들러를 덮어쓰고 " 어떤 태그를 클릭했는지에 관계없이 11"입니다.

이 문제를 해결하려면 i를 매개변수로 전달하여 각 핸들러에 대한 클로저를 생성하는 것이 중요합니다. 이렇게 하면 모든 함수에 고유한 i 값이 있습니다.

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

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

handleElement 함수를 사용하면 각 이벤트 핸들러에 고유한 i가 할당되어 해당 앵커가 표시될 때 올바른 경고 메시지가 표시됩니다. 태그를 클릭했습니다.

위 내용은 루프를 사용하여 JavaScript에서 동적으로 생성된 요소에 이벤트 핸들러를 올바르게 할당하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!