事件冒泡，简单来说就是事件传递_简单来说就是_事件从按钮开始传给它的爸爸
事件冒泡，简单来说就是“事件传递”
想象一下，你在页面上点了一个按钮，然后按钮的爸爸（父元素）、爷爷（祖父元素）、太爷爷（祖父的父元素）……都得到了通知，这个传递过程就叫做事件冒泡。
事件冒泡的步骤，就像传话一样
- 用户点击了某个元素，比如一个按钮。
- 事件从按钮开始，传给它的爸爸。
- 然后传给爸爸的爸爸，直到传到最顶层的爸爸（根元素）。
Vue中的事件冒泡示例
看看这个示例，点击按钮时，会先触发child-click方法，如果stopPropagation没有被调用，事件就会冒泡到父元素，触发parent-click方法。
| 事件 | 触发方法 |
|---|---|
| 点击按钮 | child-click |
| 事件冒泡 | parent-click |
阻止事件冒泡，有几种方法
stopPropagation方法：在事件处理器中调用它。- Vue事件修饰符：直接在模板中使用，比如
@click.stop。
事件冒泡的应用场景，就像多面手一样
- 事件委托：在父元素上处理所有子元素的事件，提高性能。
- 统一处理逻辑：在父元素中处理子元素的事件，简化代码。
比如，在父元素上绑定一次点击事件，就可以处理所有子元素的点击。
事件捕获与事件冒泡，有什么区别？
| 比较项 | 事件捕获 | 事件冒泡 |
|---|---|---|
| 传播方向 | 从根元素到目标元素 | 从目标元素到根元素 |
| 处理器触发顺序 | 先触发捕获阶段处理器 | 先触发目标阶段处理器，再触发冒泡阶段处理器 |
| 应用场景 | 用于在捕获阶段处理事件 | 用于在冒泡阶段处理事件 |
在Vue中，默认是事件冒泡阶段触发，如果需要在捕获阶段处理，可以使用.capture修饰符。
注意事项，就像开车一样要小心
- 性能问题：冒泡可能会影响性能，尤其是在复杂的DOM结构中。
- 意外行为：有时候冒泡会导致你不希望的行为。
- 事件修饰符的使用：合理使用修饰符可以控制事件的传播和默认行为。
总结与建议，就像指南针一样指引你
事件冒泡是个好东西，但要用对地方。合理使用修饰符，优化事件处理器，调试测试，这些都是提高代码质量和性能的关键。