내 이벤트 핸들러가 동적으로 생성된 요소의 마지막 루프 반복에서 값을 받는 이유는 무엇입니까?

이벤트 핸들러 및 클로저의 변수 참조

이 시나리오에서는 루프 내에서 이벤트 핸들러를 사용하여 요소를 동적으로 생성합니다. 처음에는 루프 반복을 기반으로 고유한 값을 이벤트 핸들러에 전달하려는 의도가 있습니다. 그러나 이벤트 핸들러가 마지막 루프 반복에서 값을 수신하는 것으로 나타나 범위 지정 문제가 있음을 시사합니다.

실제로 코드의 문제는 루프 내에서 이벤트 핸들러로 익명 함수를 사용하는 데 있습니다. 당신이 올바르게 의심한 것처럼 이벤트 핸들러 함수는 루프 내의 변수를 참조하는 클로저입니다. 이벤트가 실행될 때 루프는 완료되고 참조된 변수는 마지막 반복에서 할당된 최종 값을 보유합니다.

클로저 구현

이 문제를 해결하려면 의도한 값을 발행하고 이벤트 핸들러에 적절하게 전달하려면 루프 실행 시 변수를 캡처하는 클로저를 구현해야 합니다. 이렇게 하면 각 이벤트 핸들러는 필요한 특정 값에 대한 자체 참조를 갖게 됩니다.

다음 수정된 코드는 이벤트 핸들러 함수를 즉시 호출하는 다른 익명 함수(또는 IIFE 또는 즉시 호출되는 함수 표현식):

for(var i = 0; i < blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function(s, c, a)
    {
        return function()
        {
            onStatusChanged(s, c, a);
        }
    }(select, callid, anotherid);
    td.appendChild(select);
}

이 수정된 코드에서 내부 IIFE는 전달되는 필수 매개변수(select, callid, anotherid)를 사용하면서 실제 이벤트 핸들러 함수를 반환합니다. 루프에서. 루프 실행 시 이러한 값을 캡처하면 각 이벤트 핸들러에 대해 별도의 범위를 효과적으로 생성할 수 있습니다.

이 기술을 사용하면 각 이벤트 핸들러가 이벤트가 발생할 때 필요한 값에 대한 자체 참조를 갖게 되어 문제를 해결할 수 있습니다. 부적절한 값 참조 문제.

위 내용은 내 이벤트 핸들러가 동적으로 생성된 요소의 마지막 루프 반복에서 값을 받는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!