在循環中使用事件監聽器時如何避免關閉問題？

在循環中使用事件監聽器時避免關閉問題

在嘗試使用for 循環將事件監聽器附加到多個元素時，您遇到過所有偵聽器最終都瞄準最後一個物件的問題。這是由於 JavaScript 中閉包的工作方式所致。

理解閉包

當函數引用在其作用域之外聲明的變數時，它甚至會保留對該變數的存取權函數退出後。在您的情況下，循環引用 boxa 和 boxb 中定義的事件偵聽器函數是在循環外部定義的。循環完成後，這些變數指向循環中的最後一個元素。

修正問題

要避免此閉包問題，您可以使用立即呼叫的函數循環內的表達式 (IIFE)。 IIFE 會建立一個新的作用域，因此在函數外部無法存取其中宣告的變數。

修訂後的代碼

以下是已就位IIFE 的修訂後代碼：

// Function to run on click:
function makeItHappen(elem, elem2) {
  var el = document.getElementById(elem);
  el.style.backgroundColor = "red";
  var el2 = document.getElementById(elem2);
  el2.style.backgroundColor = "blue";
}

// 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
}

透過使用IIFE，您可以確保每個事件偵聽器函數都有自己的作用域，從而防止關閉問題。現在，每個事件偵聽器將正確定位循環內的對應元素。

以上是在循環中使用事件監聽器時如何避免關閉問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！