事件冒泡和捕获是处理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、事件冒泡阶段：事件从目标节点向上传播回根节点。
大部分情况下，我们主要关注目标阶段和事件冒泡阶段，因为事件捕获阶段不太常用且部分浏览器支持度不佳。
使用场景
了解事件冒泡和事件捕获对于解决一些特定的问题非常有帮助。
当你需要在某个父元素上监听其子元素的事件时，可以利用事件冒泡的特性来简化代码。
如果你需要在事件到达某个元素之前就进行处理，可以使用事件捕获来实现。
阻止事件冒泡可以防止事件无意义的多次处理，提高性能。
相关问题与解答
Q1: 如何在JavaScript中阻止事件冒泡？
A1: 在事件处理器内部调用事件的 stopPropagation() 方法即可阻止事件冒泡。
Q2: 如何利用事件捕获实现页面全局的事件监听？
A2: 在添加事件监听器时，将捕获参数设置为 true，这样就能利用事件捕获机制在全局范围内监听事件。
Q3: 事件冒泡和事件捕获哪个性能更好？
A3: 通常来说，事件冒泡的性能要优于事件捕获，因为事件捕获需要从根节点遍历到目标节点，而事件冒泡则是相反的方向。
Q4: 所有浏览器都支持事件捕获吗？
A4: 不是所有浏览器都完全支持事件捕获，尤其是老版本的IE浏览器在某些类型的事件上不支持事件捕获，因此在实际开发中，使用事件冒泡更为普遍和安全。
