Vanilla JavaScript 事件委托如何提高多个单独事件侦听器的性能？

Vanilla JavaScript 事件委托：详细分析

背景

事件委托是一种用于简化附加到不同事件监听器的处理的技术。 DOM 结构中的元素。在普通 JavaScript 中，可以使用 .addEventListener() 来实现。

Vanilla JS 中的事件委托

要翻译问题中提供的 jQuery 示例：

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

...对于普通 JavaScript，我们将使用：

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

改进解决方案

但是，为了优化性能并避免过多的 DOM 遍历，建议仅将内部选择器传递给 .closest()：

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

简化代码结构

为了便于阅读，通常会在提前返回时检查条件语句：

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

性能比较

与问题中提供的替代解决方案（document.getElementById('main').addEventListener('click', doThis);）相比，这个方法提供了改进的性能，因为它采用事件冒泡并避免迭代 #main 中的众多子元素。

Live演示

为了说明差异，您可以参考答案中提供的实时演示片段。单击内部元素 (#inner) 后，普通 JavaScript 和 jQuery 事件处理程序都会将各自的消息记录到控制台。

以上是Vanilla JavaScript 事件委托如何提高多个单独事件侦听器的性能？的详细内容。更多信息请关注PHP中文网其他相关文章！