Vanilla JavaScript 事件委託與 jQuery 的最佳效能方法相比如何？

Vanilla JavaScript 中的事件委託以獲得最佳效能

重新檢視jQuery 語法

在jQuery 中，可以使用以下程式碼實現事件委託：

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

翻譯為香草JavaScript

在普通 JavaScript 中利用事件委託可以透過 addEventListener 來實現。然而，優化該方法以提高效率非常重要。考慮以下替代方案：

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

利用closest()，我們檢查單擊的元素或其任何祖先是否與.focused選擇器匹配。這消除了低效迭代子元素的需要。

保持程式碼緊湊

為了增強程式碼緊湊性，主要邏輯可以放在早期回傳語句的下面：

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

  // Code of settingsPanel here
});

範例實作

以下程式碼示範了方法：

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

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

使用普通JavaScript 和jQuery事件處理程序與元素互動時觀察輸出。

以上是Vanilla JavaScript 事件委託與 jQuery 的最佳效能方法相比如何？的詳細內容。更多資訊請關注PHP中文網其他相關文章！