使用「closest()」的事件委託如何優化 Vanilla JavaScript 事件處理？

原生JavaScript 事件委託：一種高效且正確的方法

事件委託是JavaScript 中的一種常見技術，它允許您將事件偵聽器附加到單一父元素並將事件處理委託給其子元素。這種方法可以避免為每個子級建立冗餘的事件偵聽器，從而顯著提高效能。

在普通 JavaScript 中實作事件委託的常見方法是透過 addEventListener() 方法。但是，問題中提到的實作涉及遍歷所有#main 的子級，這對於效能而言並不是最佳的。

更有效的替代方案是利用closest() 方法，該方法檢查是否單擊了元素具有與指定選擇器匹配的父元素。這使您可以更準確、更有效率地委託事件。

例如，使用closest() 將jQuery 事件處理程序轉換為普通JavaScript：

在此程式碼中，我們首先選擇#main 元素並為「click」事件新增事件偵聽器。當點擊發生時，我們使用closest()來檢查被點擊的元素是否有一個帶有「.focused」類別的父元素。如果是，我們呼叫 settingsPanel() 函數。

這個方法很有效，因為它只會檢查必要的元素，不需要迭代 #main 的所有子元素。此外，它透過直接引用目標元素來減少脆弱的依賴關係。

使用深度巢狀結構時，確保內部選擇器不能同時是父元素可以進一步最佳化效能。在給定的參考材料中提供了有關此方法的現場演示和其他詳細資訊。

以上是使用「closest()」的事件委託如何優化 Vanilla JavaScript 事件處理？的詳細內容。更多資訊請關注PHP中文網其他相關文章！