JavaScript에서 동적으로 생성된 요소에 이벤트 처리기를 효율적으로 할당하려면 어떻게 해야 합니까?

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

HTML 문서에 여러 앵커 태그와 같이 동적으로 생성된 요소가 있다고 가정합니다. . 이러한 각 요소에 이벤트 핸들러를 할당하려면 다음과 유사한 루프 사용을 고려할 수 있습니다.

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);

이 기술을 활용하면 각 핸들러에 고유한 i 값이 할당되고 각 핸들러가 올바른 값( 1~10).

위 내용은 JavaScript에서 동적으로 생성된 요소에 이벤트 처리기를 효율적으로 할당하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!