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中文网其他相关文章！