javascript - 为什么在Javascript中使用闭包时鼠标悬停事件不起作用？

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 闭包——简单实用的示例