Vanilla JavaScript 事件委託如何提升多個單獨事件偵聽器的效能？

Vanilla JavaScript 事件委託：詳細分析

背景

事件委託是一種用於簡化附加到不同事件監聽器的處理的技術。 DOM 結構中的元素。在普通 JavaScript 中，可以使用 .addEventListener() 來實作。

Vanilla JS 中的事件委託

要翻譯問題中提供的jQuery 範例：

...對於普通JavaScript，我們將使用：

改進解決方案

但是，為了優化效能並避免過多的DOM遍歷，建議僅將內部選擇器傳遞給.closest()：

簡化程式碼結構

為了方便閱讀，通常會在提前返回時檢查條件語句：

效能比較

與問題中提供的替代解決方案（document.getElementById('main').addEventListener('click', doThis);）相比，這個方法提供了改進的性能，因為它採用事件冒泡並避免迭代 #main 中的眾多子元素。

Live示範

為了說明差異，您可以參考答案中提供的即時簡報片段。點選內部元素 (#inner) 後，普通 JavaScript 和 jQuery 事件處理程序都會將各自的訊息記錄到控制台。

以上是Vanilla JavaScript 事件委託如何提升多個單獨事件偵聽器的效能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！