事件捕获/事件冒泡，终止冒泡/阻止默认行为

一. DOM事件触发的阶段

当一个DOM事件被触发时，它不仅仅只是单纯地在本身对象上触发一次，而是会经历三个不同的阶段：

• 捕获阶段：先由文档的根节点 document 往事件触发对象，从外向内捕获事件对象；
• 目标阶段：到达目标事件位置（事发地），触发事件；
• 冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

简单来说，事件捕获是从外到内的触发事件，事件冒泡是从内到外的触发事件

二. 监听事件

使用 addEventListener 进行事件监听

element.addEventListener(event, function, useCapture);

useCapture：用于描述事件是冒泡还是捕获，true 为捕获模式，false 为冒泡模式，默认为 false

三. 终止冒泡

vue 为 v-on 提供了事件修饰符

• .stop
• .prevent
• .capture
• .self
• .once

我们使用 .stop 修饰事件即可终止冒泡

<div  @click="a" ></div>
<div  @click.stop="a" ></div> //  触发点击事件时, 终止冒泡

四. 阻止默认行为

在触发事件时, 也可能会触发标签的默认行为
我们可以使用 .prevent 阻止标签的默认行为

<a href="" @click="a" > xxxx </a>
<a href="" @click.prevent="a" > xxxx </a> // 触发点击事件时, 阻止a标签的跳转行为

.