什么是事件冒泡事件捕获

事件冒泡和捕获是处理DOM事件传播的两种机制，冒泡是自底向上，捕获是自顶向下。

事件冒泡和事件捕获是Web页面中处理DOM事件传播的两种机制，它们决定了当用户与页面交互时，如何处理和响应这些交互行为，理解这两种机制对于前端开发是非常重要的，因为它们影响着事件处理器的执行顺序以及事件处理的效果。

事件冒泡

事件冒泡是指事件从最深的DOM树节点开始向上传递到DOM树根节点的过程，当一个元素上的事件被触发后，比如点击了一个按钮，这个事件会先在这个按钮上被处理，然后逐级向上传递给它的父元素，直到达到文档的根节点。

在事件冒泡的过程中，每个父级元素都可以监听并处理这个事件，除非在事件传播的过程中，有代码明确阻止了事件的进一步传播，这种机制使得开发者可以在不同的层级上对同一个事件做出响应，提供了灵活的事件处理方式。

假设有一个嵌套结构的DOM元素：

<div id="parent">
  <button id="child">Click me</button>
</div>

如果给child按钮绑定了一个点击事件处理器，当点击这个按钮时，点击事件会先在按钮上触发，然后冒泡到parent元素。

事件捕获

事件捕获是与事件冒泡相对的一个概念，它是从DOM树的根节点向下传递到具体的事件目标节点的过程，当一个事件被触发时，它会首先从 document 对象或者 window 对象（取决于事件类型）开始，向下传播到实际的目标元素。

事件捕获常用于在事件到达目标之前进行一些预处理操作，比如阻止事件的默认行为或阻止事件的进一步传播，通过事件捕获，开发者可以在事件影响DOM树之前截获并处理它。

事件流程

一个完整的事件流程包括三个阶段：

1、事件捕获阶段：事件从根节点向下传播到目标节点。

2、目标阶段：事件到达目标节点，触发目标节点的事件处理器。

3、事件冒泡阶段：事件从目标节点向上传播回根节点。

大部分情况下，我们主要关注目标阶段和事件冒泡阶段，因为事件捕获阶段不太常用且部分浏览器支持度不佳。

使用场景

了解事件冒泡和事件捕获对于解决一些特定的问题非常有帮助。

当你需要在某个父元素上监听其子元素的事件时，可以利用事件冒泡的特性来简化代码。

如果你需要在事件到达某个元素之前就进行处理，可以使用事件捕获来实现。

阻止事件冒泡可以防止事件无意义的多次处理，提高性能。