在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閉合–簡單的實際示例