DOM 事件机制和事件委托：提升前端性能

前端

2024-02-10 19:07:19

理解 DOM 事件机制和事件委托

在现代网络应用程序中，响应式和高效的交互至关重要。DOM 事件机制和事件委托是两个强大的技术，可帮助您实现这些目标。

DOM 事件机制

DOM（文档对象模型）是一个编程接口，允许 JavaScript 与网页文档进行交互。事件机制是 DOM 的一个基本组成部分，它允许您监视和响应用户交互，如点击、鼠标移动和键盘输入。

当用户与文档中的元素交互时，浏览器会触发一个事件对象，其中包含有关交互的详细信息。您可以使用 addEventListener() 方法将事件侦听器附加到元素，以便在触发事件时执行回调函数。

事件委托

事件委托是一种通过将事件侦听器附加到较高层级的祖先元素（而不是直接附加到目标元素）来优化事件处理的技术。当发生事件时，浏览器会沿着 DOM 树向上传播事件，直到找到具有匹配事件侦听器的祖先元素为止。

使用事件委托有两个主要好处：

性能优化： 通过将事件侦听器附加到更高级别的元素，您可以减少浏览器的事件处理开销。
更简单的事件管理： 它允许您使用单个事件侦听器来处理来自多个目标元素的事件，从而简化事件处理逻辑。

事件委托示例

考虑以下 HTML 代码：

<div id="grandparent">
  <div id="parent">
    <div id="child">
      <span>文字</span>
    </div>
  </div>
</div>

如果我们分别为 grandparent、parent 和 child 元素添加事件侦听器，那么当单击文本时，所有三个事件侦听器都会被触发。

使用事件委托，我们可以将事件侦听器附加到 grandparent 元素，并使用 event.target 属性检查触发的元素：

const grandparent = document.getElementById("grandparent");
grandparent.addEventListener("click", (event) => {
  if (event.target === child) {
    // 处理子元素点击
  } else if (event.target === parent) {
    // 处理父元素点击
  } else if (event.target === grandparent) {
    // 处理祖先元素点击
  }
});