事件委託如何提升 Vanilla JavaScript 效能和程式碼簡單性？

使用Vanilla JavaScript 進行事件委託

在vanilla JavaScript 中，事件委託是一種用於將事件偵聽器附加到單一事件偵聽器附加到單一事件偵聽器父元素而不是其中的各個元素。這種方法消除了對多個事件偵聽器的需求，並簡化了程式碼，從而提高了效能。

有效的事件委託

要有效地實現事件委託，請使用以下步驟：

1. 查找事件將發生的父元素。
2. 新增事件偵聽所需事件類型（例如按一下）的父元素。
3. 在事件處理程序內，檢查按一下的元素是否與特定選擇器相符或其父元素與選擇器相符。
4. 如果滿足條件，則執行所需的函數或操作。

範例：委託jQuery程式碼

考慮以下jQuery 程式碼：

$('#main').on('click', '.focused', function() {
    settingsPanel();
});

要將此程式碼轉換為普通JavaScript，請轉換為普通JavaScript使用以下內容：

document.querySelector('#main').addEventListener('click', (e) => {
    if (e.target.closest('.focused')) {
        settingsPanel();
    }
});

在此程式碼中，我們使用querySelector() 尋找 ID 為 main 的父元素，並為其附加一個按一下事件偵聽器。當單擊此父級中的元素時，它會檢查被單擊的元素或其任何父級元素是否具有 .focused 類別。如果是這樣，它會呼叫 settingsPanel() 函數。

委託的好處：

• 改進的性能：消除了對多個事件監聽器，減少事件處理次數函數。
• 簡化的程式碼：與為每個元素使用單獨的事件偵聽器相比，更容易維護和理解。
• 靈活性：允許動態綁定基於選擇器的事件處理程序，使您能夠處理來自可能動態添加或刪除的元素的事件。

以上是事件委託如何提升 Vanilla JavaScript 效能和程式碼簡單性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！