如何將事件偵聽器附加到 JavaScript 中動態建立的元素？

將事件附加到JavaScript 中動態建立的元素

當嘗試動態新增HTML 元素並為其指派事件偵聽器時，可能會遇到事件不觸發的問題。這是因為事件監聽器是在動態元素新增到 DOM 之前附加的。

要解決此問題，一種解決方案是使用 事件委託。這涉及在更高層級的元素上註冊事件偵聽器，該元素將處理所有子元素上的點擊。這允許動態新增的元素觸發事件，即使它們在附加事件偵聽器時不存在。

程式碼範例

考慮以下程式碼：

document.addEventListener("click", function(e) {
  const target = e.target.closest("#btnPrepend");

  if (target) {
    // Do something with `target`.
  }
});

在此程式碼中，我們向文件物件新增了一個事件偵聽器，它將偵聽任何元素上的點擊。當點擊發生時，我們使用closest()方法來檢查點擊的目標是否是ID為「btnPrepend」的子元素。如果是，我們可以在按鈕上執行我們想要的操作。

這種方法之所以有效，是因為事件被委託給文檔對象，該對像在添加任何動態元素之前就存在。透過檢查事件處理程序中是否存在「btnPrepend」元素，我們確保事件僅在按鈕存在時觸發。

使用jQuery

jQuery 透過on() 方法簡化了事件委託：

$(document).on("click", "#btnPrepend", function() {
  // Do something with `$(this)`.
});

這裡，我們委託了點擊事件到文件物件並指定我們要處理的按鈕的選擇器。這允許更簡潔和可讀的程式碼。

結論

在使用動態建立的元素時請記住考慮事件委託。它提供了一種強大的方法來處理事件，確保即使在附加事件偵聽器後添加與它們關聯的元素時，它們也能正確觸發。

以上是如何將事件偵聽器附加到 JavaScript 中動態建立的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！