為什麼 For 循環中的事件偵聽器會以最後一個物件為目標？

addEventListener Using a For Loop and Passing Values

When using a for loop to add event listeners to multiple objects objects, object to multiple obects to multiple ob所有偵聽器重新定位的目標。本文將解決此問題，並提供一個使用閉包的修正代碼：

問題概述：

嘗試使用循環為多個物件新增事件偵聽器，但最終所有偵聽器都針對相同的物件（最後一個）。

修正代碼：

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中文網其他相關文章！