为什么 For 循环中的事件侦听器以最后一个对象为目标？

addEventListener Using a For Loop and Passing Values

When using a for loop to add event listeners to multiple objects, the last object往往成为所有侦听器重新定位的目标。本文将解决此问题，并提供一个使用闭包的修正代码：

问题概述：

尝试使用循环为多个对象添加事件侦听器，但最终所有侦听器都针对相同的对象（最后一个）。

修正代码：

closures是一种防止此类问题的方法。修改后的代码如下：

// 函数在点击时运行：
function makeItHappen(elem, elem2) {
    var el = document.getElementById(elem);
    el.style.backgroundColor = "red";
    var el2 = document.getElementById(elem2);
    el2.style.backgroundColor = "blue";
}

// 自动加载函数以添加侦听器：
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);
    }()); // 立即调用
}

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