爲什麼在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

的「呼叫括號」 (i)函數表達式後功能立即執行並分配它的返回值作爲事件處理程序（它是undefined）。這裏是一個函數聲明，這使得它更容易看到（希望）一個例子：

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