如何在不使用 jQuery 的情況下監聽動態建立的元素上的事件？

如何在動態建立的元素中加入事件偵聽器

在包含動態內容的網頁上工作時，可能需要在不包含動態內容的元素中新增事件偵聽器最初出現在頁面上。本指南概述了一種不依賴 jQuery 即可實現此目的的方法。

原始方法涉及利用 doc.body.addEventListener('click') 來處理頁面載入時現有元素的事件。然而，對於動態生成的元素，需要更健壯的解決方案。

委託與事件傳播

動態新增事件監聽器的關鍵是事件委託。透過此方法，您可以將單一事件偵聽器附加到父元素（例如正文），然後檢查事件的目標以確定按一下的特定元素。

範例程式碼

<code class="javascript">document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // Perform actions specific to 'li' elements
  }
});</code>

在此範例中，事件偵聽器附加到正文。當點選主體內的元素時，將檢查事件的目標。如果目標是 li 元素，則執行所需的操作。

注意事項

請注意，提供的程式碼與現代瀏覽器相容。為了使瀏覽器與舊版的 Internet Explorer 相容，可能需要圍繞本機事件函數的自訂包裝器。

以上是如何在不使用 jQuery 的情況下監聽動態建立的元素上的事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！