addEventListener 매개 변수 오류

Okey 그래서 다음 javaScript 코드가 있습니다.addEventListener 매개 변수 오류

function test(id) 
{ 
alert(id); 
} 


var elem = document.getElementsByClassName('outsideDiv'); 

for(var i=0; i < elem.length; i++) 
{ 
elem[i].addEventListener('mouseover', function(){test(i);}, false); 
}

이렇게하면 클래스가있는 모든 div가 마우스 오버되지만 함수는 항상 최신 i 인덱스를 반환합니다. 이 경우 나는 5 개의 div 엘리먼트를 가지며 경고는 항상 5이다. 왜 그 이유를 설명 할 수 있습니까?

출처

2012-12-12 user1593846

[Javascript closure inside loops - 간단한 실제 예] (http : //stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example), [악명 높은 루프 문제] (http : //stackoverflow.com/questions/1451009/javascript-infamous-loop-problem) 및 기타 수천 명 – Bergi

이 대신 사용해보십시오 :

function mouseOverFunc(i) { 
    return function() { 
     test(i); 
    }; 
} 

function test(id) { 
    alert(id); 
} 

var elem = document.getElementsByClassName('outsideDiv'); 

for(var i=0; i < elem.length; i++) { 
    elem[i].addEventListener('mouseover', mouseOverFunc(i), false); 
}

당신이 i의 값이 각 청취자를 위해 보존됩니다 의미하지 않는다 요소에 이벤트 리스너를 추가해서. i으로 새 범위를 만들 수있는 클로저를 만들어야합니다.

이 이유는 각 수신기에 바인딩 된 기능이 참조 용일 뿐이 기 때문입니다. 이벤트 (mouseover)가 발생하면 함수가 마지막으로 호출되지만 i 값은 무엇입니까? for 루프는 오래전에 실행을 마쳤으므로 i의 값이 최종 값 (5)입니다.

출처

2012-12-12 18:59:51 Ian

addEventListener 매개 변수 오류

답변

관련 문제