首頁  >  文章  >  web前端  >  如何在沒有 jQuery 的情況下處理動態建立元素的事件偵聽器?

如何在沒有 jQuery 的情況下處理動態建立元素的事件偵聽器?

Linda Hamilton
Linda Hamilton原創
2024-10-22 12:08:02588瀏覽

How to Handle Event Listeners for Dynamically Created Elements Without jQuery?

動態建立元素的事件監聽器

要在不使用jQuery 的情況下向動態產生的元素新增事件監聽器,您將新增事件監聽器,您新增事件監聽器可以使用事件委託。操作方法如下:

使用事件委託
事件物件的 target 屬性可讓您識別事件發生在哪個元素上。使用此功能,您可以將事件偵聽器綁定到父元素並檢查目標元素以回應特定條件。例如:

<code class="javascript">document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // Do your action on the newly created 'li'
  }
});</code>

在此範例中,事件偵聽器綁定到主體,當任何子元素發生點擊時,程式碼會檢查它是否是「li」。如果是這樣,則執行指定的操作。

注意事項
請注意,此方法適用於支援事件委託機制的現代瀏覽器。對於較舊的 IE 版本,您可能需要使用 AttachEvent 實作自訂事件處理程序。

以上是如何在沒有 jQuery 的情況下處理動態建立元素的事件偵聽器?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn