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

为什么在Javascript中使用闭包时mouseover事件不起作用？

1 个答案: