为什么 JavaScript 循环中的事件监听器总是以最后一个元素为目标？

了解循环中的事件监听器行为

在 JavaScript 中，事件监听器允许元素响应用户操作。使用循环向多个对象添加事件侦听器可能会引起对侦听器功能的担忧。

传统方法的问题

考虑以下情况：您正在尝试添加“容器”类中多个元素的单击事件侦听器。但是，当您使用传统的 for 循环时，您会注意到所有侦听器最终都以循环中的最后一个元素为目标。

原因：闭包

出现此行为由于 JavaScript 中的闭包。当您在循环内分配变量时，它们引用相同的内存位置。因此，当您尝试在事件侦听器函数中访问这些变量时，它们始终引用最后一次迭代的值。

解决方案：立即调用

解决此问题问题，在循环内使用立即调用。通过这样做，您可以为每次迭代创建一个新的执行上下文，确保该上下文中的变量保持本地且未绑定到循环变量。

固定代码：

下面更正的代码利用立即调用来实现所需的行为：

// Autoloading function to add the listeners:
var elem = document.getElementsByClassName("triggerClass");

for (var i = 0; i < elem.length; i += 2) {
    (function () {
        var k = i + 1;
        var boxa = elem[i].parentNode.id;
        var boxb = elem[k].parentNode.id;
        elem[i].addEventListener("click", function() { makeItHappen(boxa,boxb); }, false);
        elem[k].addEventListener("click", function() { makeItHappen(boxb,boxa); }, false);
    }()); // immediate invocation
}

在此更正的代码中，立即调用为每次迭代创建一个新的执行上下文，允许 boxa 和 boxb 变量在事件侦听器函数中保持其正确的值。

以上是为什么 JavaScript 循环中的事件监听器总是以最后一个元素为目标？的详细内容。更多信息请关注PHP中文网其他相关文章！