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