如何使用循環將事件處理程序正確指派給 JavaScript 中動態產生的元素？

在Javascript 中使用循環產生事件處理程序

使用動態網頁時，通常需要將事件處理程序指派給多個元素，這些元素以程式設計方式產生。這可以透過使用循環來實現，確保高效和集中的處理。

一個常見的場景是從 AJAX 回應產生多個錨標記 (a)，其中每個標記都需要一個 onclick 事件來提醒相應的數字。但是，像下面這樣的簡單循環方法可能無法如預期般運作：

for (i = 1; i < 11; i++) {
  document.getElementById("b" + i).onclick = function() {
    alert(i);
  };
}

在此範例中，所有事件處理程序共用相同的變數i，這會導致最後一個處理程序覆寫先前的處理程式並發出警報“ 11"，無論按一下哪個標籤。

要解決此問題，至關重要的是為每個處理程序建立一個閉包，並將 i 作為參數傳遞。這確保了每個函數都有自己唯一的i 值：

function handleElement(i) {
  document.getElementById("b" + i).onclick = function() {
    alert(i);
  };
}

for (i = 1; i < 11; i++) {
  handleElement(i);
}

透過使用handleElement 函數，每個事件處理程序都會被指派一個唯一的i，從而能夠在對應的錨點出現時顯示正確的警報訊息標籤被點擊。

以上是如何使用循環將事件處理程序正確指派給 JavaScript 中動態產生的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！