深入理解 DOM 事件流：捕获、目标与冒泡阶段的机制

DOM 事件流：一场网页舞台剧的幕后花絮

想象一下，你的网页是一个热闹的舞台，而用户每一次点击、每一次鼠标移动，都是一场精心编排的舞台剧。这场剧的精彩呈现，离不开一个叫做 DOM 事件流的幕后机制。它就像舞台剧的导演，掌控着事件发生的顺序，决定着哪个演员先登场，哪个演员后谢幕。

如果你只是一个普通的观众，可能只会关注舞台上演员的表演，但如果你想成为一个优秀的网页开发者，就必须深入了解 DOM 事件流这个“导演”，才能更好地控制你的舞台，创造更流畅、更可控的用户体验。

事件流：从“抓人”到“谢幕”

DOM 事件流，简单来说，就是当一个 HTML 元素上发生事件时（比如点击、鼠标悬停），浏览器响应这个事件的整个过程。这个过程可以分为三个阶段：

捕获阶段（Capturing Phase）： 就像导演在后台发出指令，寻找适合扮演这个角色的演员。浏览器从 window 对象开始，沿着 DOM 树一层一层地向下查找，直到找到目标元素。在这个过程中，任何元素都有机会“捕获”到这个事件，并做出相应的反应。
目标阶段（Target Phase）： 终于找到了最适合扮演角色的演员！事件到达了触发事件的元素本身。在这个阶段，事件会在目标元素上触发，执行绑定的事件处理程序。
冒泡阶段（Bubbling Phase）： 演员谢幕了，但舞台剧还没结束。事件沿着 DOM 树向上冒泡，一层一层地传递到父元素，直到 window 对象。在这个过程中，任何父元素都有机会“拦截”到这个事件，并做出相应的反应。

是不是有点像古代皇帝选妃？先是层层选拔（捕获阶段），选出最合适的（目标阶段），然后妃子回宫，向皇后娘娘汇报情况（冒泡阶段）。

举个栗子：一个嵌套的盒子模型

为了更好地理解这三个阶段，我们来举个生动的例子。假设我们有这样一个简单的 HTML 结构：

<div id="grandparent">
  <div id="parent">
    <button id="child">点击我！</button>
  </div>
</div>

我们有三个嵌套的 div 元素：grandparent（爷爷），parent（爸爸），和 child（儿子，一个按钮）。现在，用户点击了 child 按钮。

捕获阶段： 事件从 window 对象开始，沿着 DOM 树向下传递：window -> document -> html -> body -> grandparent -> parent -> child。在这个过程中，grandparent 和 parent 都有机会捕获到这个事件，并执行绑定的事件处理程序。
目标阶段： 事件到达了 child 按钮，执行绑定的事件处理程序。
冒泡阶段： 事件沿着 DOM 树向上冒泡：child -> parent -> grandparent -> body -> html -> document -> window。在这个过程中，parent 和 grandparent 也有机会拦截到这个事件，并执行绑定的事件处理程序。

如何利用事件流？

现在我们知道了事件流的三个阶段，那么我们如何利用它来更好地控制我们的网页呢？

事件委托（Event Delegation）： 这是事件流最常用的技巧之一。我们可以将事件处理程序绑定到父元素上，而不是每个子元素上。当子元素触发事件时，事件会冒泡到父元素，父元素再根据事件的目标元素来判断是否需要执行相应的处理程序。

想象一下，你是一个餐馆老板，有十张桌子。如果每张桌子都安排一个服务员，那成本就太高了。更好的办法是，安排几个服务员负责整个餐厅，当客人需要服务时，服务员根据客人所在的桌子提供相应的服务。这就是事件委托的思想。

比如，我们想给上面的例子中的 grandparent 元素添加一个点击事件处理程序，当点击 child 按钮时，显示一个提示信息：
```
document.getElementById('grandparent').addEventListener('click', function(event) {
  if (event.target.id === 'child') {
    alert('你点击了按钮！');
  }
});
```
这样，我们只需要给 grandparent 元素绑定一个事件处理程序，就可以处理所有子元素的点击事件。
阻止事件传播（Stopping Propagation）： 有时候，我们不希望事件继续冒泡或捕获。比如，我们只想在 child 按钮上执行事件处理程序，不希望 parent 或 grandparent 也执行相应的处理程序。这时，我们可以使用 event.stopPropagation() 方法来阻止事件传播。
```
document.getElementById('child').addEventListener('click', function(event) {
  alert('我是按钮，我被点击了！');
  event.stopPropagation(); // 阻止事件冒泡
});
```
这样，当点击 child 按钮时，只会执行 child 按钮上的事件处理程序，而不会执行 parent 或 grandparent 上的事件处理程序。
阻止默认行为（Preventing Default）： 有些元素有默认的行为。比如，点击一个链接会跳转到另一个页面，提交一个表单会刷新页面。有时候，我们不希望这些默认行为发生，而是希望执行我们自己的代码。这时，我们可以使用 event.preventDefault() 方法来阻止默认行为。
```
<a href="https://www.example.com" id="link">点击我！</a>

<script>
document.getElementById('link').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止链接跳转
  alert('你点击了链接，但是没有跳转！');
});
</script>
```
这样，当点击链接时，不会跳转到 https://www.example.com，而是会弹出一个提示框。

捕获还是冒泡？这是一个问题

addEventListener() 方法的第三个参数可以用来指定事件处理程序是在捕获阶段还是冒泡阶段执行。默认情况下，事件处理程序是在冒泡阶段执行的。

addEventListener(eventType, callback, false)：在冒泡阶段执行事件处理程序。
addEventListener(eventType, callback, true)：在捕获阶段执行事件处理程序。

那么，我们应该选择哪个阶段呢？

冒泡阶段： 大部分情况下，我们都选择冒泡阶段。因为冒泡阶段更符合直觉，也更方便进行事件委托。
捕获阶段： 只有在少数情况下，我们才需要使用捕获阶段。比如，我们需要在事件到达目标元素之前，先对事件进行一些处理，或者阻止事件到达目标元素。

总结：成为舞台剧的导演

DOM 事件流是一个非常重要的概念，理解它可以帮助我们更好地控制网页的行为，创造更流畅、更可控的用户体验。

就像一个舞台剧的导演，你需要了解每个演员的角色，知道他们什么时候登场，什么时候谢幕。只有这样，你才能掌控整个舞台，创造出一部精彩的舞台剧。

希望这篇文章能帮助你更好地理解 DOM 事件流，成为一个优秀的网页开发者，掌控你的网页舞台，创造出更多精彩的网页作品！

最后，别忘了多做实验，多多练习，才能真正掌握 DOM 事件流的精髓。祝你学习愉快！

DOM 事件流：一场网页舞台剧的幕后花絮

发表回复 取消回复

发表回复取消回复