如何在 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();
  }
});

'.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”选择器不存在时，这种方法可以防止不必要的代码执行匹配。

现场演示

以下代码片段展示了如何使用原生 JavaScript 的事件委托与 '.closest()':

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

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

在此示例中，单击“#inner”元素会将“vanilla”记录到控制台，演示 vanilla JavaScript 的事件代表团。

以上是如何在 Vanilla JavaScript 中有效地实现事件委托？的详细内容。更多信息请关注PHP中文网其他相关文章！