JavaScript 中的事件冒泡（Event Bubbling）和事件捕获（Event Capturing），是浏览器在处理事件时采用的两种机制，它们在事件的传播顺序上有显著区别。这两种机制帮助开发者在事件触发时，能够以不同的方式捕获和处理事件。
注意： 要想在冒泡和捕获阶段触发事件，首先要在想要触发事件的dom上绑定事件
1. 事件冒泡（Event Bubbling）
定义： 事件冒泡是指当一个事件被触发时，它会从事件触发的元素（目标元素）开始，逐层向上传播到 DOM 树的根元素（通常是 document 或 window）。
传播顺序： 事件目标元素 -> 父元素 -> 父元素的父元素 -> … -> document -> window
使用场景：
父子元素的事件代理：当父元素绑定事件时，子元素的事件会“冒泡”到父元素，可以通过父元素来统一管理子元素的事件。事件委托：在很多情况下，我们并不想为每个子元素都绑定事件，而是可以将事件绑定到父元素上，利用事件冒泡的特性来处理子元素的事件。
代码示例：事件冒泡
行为解释：
当点击按钮（子元素）时，先触发按钮的 click 事件，显示“Child clicked”。然后，事件会冒泡到父元素 div，触发父元素的 click 事件，显示“Parent clicked”。
输出顺序：
“Child clicked”“Parent clicked”
2. 事件捕获（Event Capturing）
定义： 事件捕获与冒泡相反，是指事件从根元素开始，逐层向下传播，直到触发事件的目标元素。
传播顺序： window -> document -> 祖父元素 -> 父元素 -> 目标元素
使用场景：
精确控制事件处理的顺序：当需要在事件到达目标元素之前就进行干预时，可以使用事件捕获。用于某些特殊的交互设计：例如，在父元素捕获事件之前阻止事件的冒泡行为。
代码示例：事件捕获
行为解释：
当点击按钮时，事件首先触发父元素 div 的 click 事件（因为它在捕获阶段）。显示“Parent clicked (Capture)”。然后，事件会传播到按钮元素，显示“Child clicked”。
输出顺序：
“Parent clicked (Capture)”“Child clicked”
3. 事件的默认顺序和使用 stopPropagation 和 preventDefault
stopPropagation()：阻止事件的进一步传播。它可以防止事件在冒泡或捕获阶段继续传播。preventDefault()：阻止事件的默认行为，比如点击链接时不跳转，表单提交时不刷新页面。
示例：stopPropagation() 和 preventDefault()
行为解释：
当点击按钮时，会触发按钮的 click 事件，显示“Child clicked”。stopPropagation() 阻止事件继续冒泡到父元素，所以父元素的 click 事件不会被触发。
输出顺序：
“Child clicked”（父元素的点击事件被阻止）
4. 总结与应用
事件冒泡：是默认的事件传播方式。适用于事件委托（父元素处理多个子元素的事件）。事件捕获：可以在事件到达目标元素之前处理事件，适用于需要优先处理事件的场景。stopPropagation() 和 preventDefault()：可以控制事件的传播和默认行为，提供更高的灵活性。
这些机制可以结合使用，使你能够在复杂的用户交互中进行精准的事件管理。