使用'closest()”的事件委托如何优化 Vanilla JavaScript 事件处理？

原生 JavaScript 事件委托：一种高效且正确的方法

事件委托是 JavaScript 中的一种常见技术，它允许您将事件侦听器附加到单个父元素并将事件处理委托给其子元素。这种方法可以避免为每个子级创建冗余的事件侦听器，从而显着提高性能。

在普通 JavaScript 中实现事件委托的一种常见方法是通过 addEventListener() 方法。但是，问题中提到的实现涉及遍历所有#main 的子级，这对于性能而言并不是最佳的。

更有效的替代方案是利用closest() 方法，该方法检查是否单击了元素具有与指定选择器匹配的父元素。这使您可以更准确、更高效地委托事件。

例如，使用closest() 将 jQuery 事件处理程序转换为普通 JavaScript：

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

在此代码中，我们首先选择#main 元素并为“click”事件添加事件侦听器。当发生点击时，我们使用closest()来检查被点击的元素是否有一个带有“.focused”类的父元素。如果是，我们调用 settingsPanel() 函数。

这种方法很有效，因为它只检查必要的元素，不需要迭代 #main 的所有子元素。此外，它通过直接引用目标元素来减少脆弱的依赖关系。

使用深度嵌套结构时，确保内部选择器不能同时是父元素可以进一步优化性能。给定的参考材料中提供了有关此方法的现场演示和其他详细信息。

以上是使用'closest()”的事件委托如何优化 Vanilla JavaScript 事件处理？的详细内容。更多信息请关注PHP中文网其他相关文章！