如何在 Vanilla JavaScript 中有效實現事件委託？

Vanilla JavaScript 中的事件委託：綜合指南

在vanilla JavaScript 中實現事件委託提供了一種高效且可維護的方式來處理事件偵聽器。與涉及修改內建原型的 jQuery 事件委託不同，vanilla JavaScript 透過使用「.closest()」事件委託提供了更強大的方法。

將jQuery 事件委託翻譯為Vanilla JavaScript

將jQuery 範例：

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

翻譯成普通版本JavaScript，我們使用：

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

翻譯成普通版本JavaScript，我們使用：

翻譯成普通版本JavaScript，我們使用：

'.closest()'方法檢查單擊的元素是否具有與 '.focused' 選擇器相符的父元素。如果是這樣，它會呼叫“settingsPanel()”函數。

document.querySelector('#main').addEventListener('click', (e) => {
  if (!e.target.closest('.focused')) {
    return;
  }
  // code of settingsPanel here, if it isn't too long
});

複雜事件鏈的最佳化

為了提高效能，特別是在處理巢狀元素時，請考慮使用提前回傳：

當“.focused”選擇器不存在時，這種方法可以防止不必要的程式碼執行匹配。

document.querySelector('#outer').addEventListener('click', (e) => {
  if (!e.target.closest('#inner')) {
    return;
  }
  console.log('vanilla');
});

$('#outer').on('click', '#inner', () => {
  console.log('jQuery');
});

現場示範以下程式碼片段顯示如何使用原生JavaScript 的事件委託與'.closest()':在此範例中，按一下「#inner」元素會將「vanilla」記錄到控制台，示範vanilla JavaScript 的事件代表團。

以上是如何在 Vanilla JavaScript 中有效實現事件委託？的詳細內容。更多資訊請關注PHP中文網其他相關文章！