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

Why doesn't the mouseover event work when use closure in Javascript?

本文关键字：mouseover 事件 不起作用 闭包 Javascript 为什么      更新时间：2023-09-26

我有以下代码

<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中，有人知道为什么吗?

函数表达式后的"调用括号" (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闭包内部循环-简单的实际例子

相关文章：