Javascript addEventListener的参数错误

好的，我得到了下面的javaScript代码

function test(id)
{
alert(id);
}


var elem = document.getElementsByClassName('outsideDiv');

for(var i=0; i < elem.length; i++)
{
elem[i].addEventListener('mouseover', function(){test(i);}, false);
}

功能测试（id）
{
警报（id）；
}
var elem=document.getElementsByClassName（'outsideDiv'）；
对于（变量i=0；i

---

这将使所有div类鼠标悬停，但函数始终返回最新的i索引。在这个例子中，我得到了5个div元素，警报总是5个no-mather witch元素。有人能解释一下原因吗？

试着用这个代替：

function mouseOverFunc(i) {
    return function () {
        test(i);
    };
}

function test(id) {
    alert(id);
}

var elem = document.getElementsByClassName('outsideDiv');

for(var i=0; i < elem.length; i++) {
    elem[i].addEventListener('mouseover', mouseOverFunc(i), false);
}

函数mouseOverFunc（i）{
返回函数（）{
试验（i）；
};
}
功能测试（id）{
警报（id）；
}
var elem=document.getElementsByClassName（'outsideDiv'）；
对于（变量i=0；i

仅仅因为您向元素添加了事件侦听器，并不意味着为每个侦听器保留了

i

的值。您需要创建一个闭包，该闭包将使用

i

创建一个新范围

发生这种情况的原因是绑定到每个侦听器的函数只是一个引用。当事件发生时（mouseover），函数最终被调用，但是

i

的值是多少？

for

循环在很久以前就完成了执行，因此

i

的值是的结束值-

5

与其他数千个循环重复