JavaScript 루프의 이벤트 핸들러가 동일한 변수를 참조하는 이유는 무엇입니까?

JavaScript 루프에서 이벤트 핸들러 작업: 고유한 이벤트 처리를 위한 클로저 사용

JavaScript에서 HTML 코드로 작업할 때 이벤트 핸들러는 재생됩니다. 웹 페이지와 사용자 상호 작용을 활성화하는 데 중요한 역할을 합니다. 그러나 이러한 이벤트 핸들러가 루프 내에 정의되면 일반적인 문제가 발생하여 예기치 않은 동작이 발생합니다.

이 문제를 설명하려면 다음 코드 조각을 고려하세요.

<code class="javascript">var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i < blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function() {
        onStatusChanged(select, callid, anotherid);
    };
    td.appendChild(select);
}

onchange가 이벤트는 요소의 경우, 경험적 증거에 따르면 특정 요소에 관계없이 동일한 값이 onStatusChanged() 메소드에 전달되는 것으로 나타났습니다. 이벤트를 트리거한 요소입니다. 이 동작은 이벤트 핸들러를 정의할 때 JavaScript가 클로저를 구현하는 방식에서 비롯됩니다.

구체적으로 루프 내에서 클로저 select.onchange = function()은 호출 중에 할당된 값을 전달하는 변수 callid 및 anotherid를 참조합니다. 루프의 마지막 반복. 결과적으로, 이벤트가 트리거될 때 이러한 변수의 값은 특정 요소가 아니라 루프 실행 중에 설정된 최신 요소입니다.

이 문제를 해결하기 위해 클로저를 구현하여 이벤트 핸들러 정의 시 select, callid 및 anotherid 값을 캡처할 수 있습니다. 다음 코드는 이 접근 방식을 보여줍니다.

<code class="javascript">var blah = xmlres.getElementsByTagName('blah');
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);
}</code>

요약하자면, JavaScript 루프 내에서 이벤트 핸들러를 정의할 때 클로저를 사용하는 것은 이벤트 핸들러 함수가 관련된 변수의 적절한 값을 받도록 하는 데 필수적입니다. 이 방법을 사용하면 특정

이벤트를 유발하는 요소입니다.

위 내용은 JavaScript 루프의 이벤트 핸들러가 동일한 변수를 참조하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!