掌控事件流：DOM 事件模型和事件委托揭秘

2023-12-22 06:37:38

在网络世界的互动舞台上，事件流扮演着不可或缺的角色，它是网页和用户之间信息交互的桥梁。DOM（文档对象模型）事件模型为开发者提供了丰富的机制来捕捉和处理这些事件，而事件委托则是一种高效的事件处理模式，让我们的代码更简洁高效。在这篇文章中，我们将深入探究 DOM 事件模型和事件委托，帮助你驾驭事件流，提升代码质量。

DOM 事件模型：理解事件的传递

DOM 事件模型规定了浏览器处理事件的顺序和方式。它定义了三种事件流阶段：

捕获阶段：从外向内依次触发。
目标阶段：事件目标元素接收到事件。
冒泡阶段：从内向外依次触发。

浏览器通常默认按照捕获阶段 -> 目标阶段 -> 冒泡阶段的顺序执行事件。不过，开发人员可以通过 addEventListener() 方法的第三个参数来选择事件的流阶段，可选值有 true（捕获）和 false（冒泡）。

事件委托：高效处理事件

事件委托是一种强大的技术，它允许我们在父元素上监听事件，而不是在每个子元素上单独监听。这种方式减少了 DOM 元素上的事件侦听器数量，提高了性能，尤其是当存在大量子元素时。

事件委托的原理是基于事件冒泡。当子元素触发事件时，事件会沿 DOM 树向上冒泡，依次触发父元素和祖先元素上的事件侦听器。这样，我们只需要在父元素上注册一个事件侦听器，就可以处理子元素触发的所有同类型事件。

实践事件委托

让我们通过一个简单的例子来演示事件委托的用法：

<div id="container">
  <button class="button">按钮</button>
  <button class="button">按钮</button>
  <button class="button">按钮</button>
</div>

const container = document.getElementById('container');

container.addEventListener('click', function(event) {
  if (event.target.classList.contains('button')) {
    // 执行按钮被点击的处理逻辑
  }
});