javascript - addEventListener 的参数错误

Question

好的，所以我得到了以下 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);
}

这使所有具有该类的 div 鼠标悬停，但该函数始终返回最新的 i 索引。在这种情况下，我有 5 个 div 元素，警报总是 5 没有我悬停的女巫。谁能解释为什么？

Answer 1

尝试改用这个：

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);
}

仅仅因为您向元素添加事件侦听器并不意味着i为每个侦听器保留 的值。您需要创建一个闭包，该闭包将使用i.

发生这种情况的原因是绑定到每个侦听器的函数只是一个引用。当事件发生时（鼠标悬停），函数最终被调用，但是 的值是i多少？for循环很久以前就执行完了，所以 的值是i结束值 - 5。