Javascript에서 클로저를 사용할 때 mouseover 이벤트가 작동하지 않는 이유는 무엇입니까?

Question

내가 다음 코드

이

<ul> 
    <li>one</li> 
    <li>two</li>   
    <li>three</li> 
    <li>four</li> 
</ul> 

var lists = document.getElementsByTagName("li"); 

for(var i=0, len = lists.length; i< len; i++){ 
    lists[i].onmouseover = function(){ 
     console.log(i); 
    }(i); 
} 

예상 결과 : 마우스가 각 li을 통해, 내가 콘솔에 0 또는 1, 2 또는 3을 가지고 있지만 mouseover에서 페이지를 새로 고칠 때 난 단지 그 수를 받았을 때, 아무도 왜 그런지 압니까?

Answer 1

함수 즉시을 실행하고 (undefined이다) 이벤트 핸들러로서 반환 값을 할당 함수식 이후 "발신 괄호"(i).

function foo(i) { 
    console.log(i); 
} 

// in the loop 
lists[i].onmouseover = foo(i); 

를 호출하는 방법을 foo 확인하고 반환 값이 lists[i].onmouseover에 할당 : 여기에 쉽게 (희망)를 참조 할 수 있습니다 함수 선언과 예입니다?

당신은 즉시 호출 함수 표현식에서 함수를 반환해야 :

lists[i].onmouseover = (function(i){ 
    return function() { 
     console.log(i); 
    }; 
}(i)); 

또는 함수 선언 :

function createHandler(i) { 
    return function() { 
     console.log(i); 
    }; 
} 

// in the loop 
lists[i].onmouseover = createHandler(i); 

상세 정보 : JavaScript closure inside loops – simple practical example