Vue事件处理 on Last Stand

vue事件处理

Sat, 05 Oct 2024 00:00:00 +0800

一、DOM 事件流

想必看过《红宝书》的前端 er 对标题都不会特别陌生，我们来看看定义：当一个 HTML 元素产生一个事件时，该事件会在树形结构的 DOM 上面沿着元素节点路径进行传播，事件所经过的路径结点都会收到该事件，这个传播过程可称为 DOM 事件流。

二、DOM 事件流模型

DOM 事件流分为 捕获型事件流 和 冒泡型事件流。两种事件流分别对应三阶段 DOM 事件流模型中的捕获阶段和冒泡阶段：

捕获阶段：事件从最外面的祖先节点依次传递到最里面的后代节点
目标阶段：真正的目标节点正在处理事件的阶段
冒泡阶段：事件又从最里面的后代节点逐层传出到最外面的祖先节点

三、Vue 之事件处理

Vue 中提供了事件绑定的语法糖，我们可以很简单地在标签中直接使用 @click="handleClick($event)" 就可以绑定点击事件。

而且在 Vue 里面，Vue 的事件触发默认为冒泡过程监听，意思就是上面 @click="handleClick($event)" 中点击事件的执行是冒泡过程触发的。

四、Vue 之事件修饰符

4.1 `.capture`

捕获监听器

<div @click="log(1)" @click.capture="log(1)" style="background-color: #00f">
 <div @click="log(2)" @click.capture="log(2)" style="background-color: #66f">
 <div @click="log(3)" @click.capture="log(3)" style="background-color: #ccf">
 <div @click="log(4)" @click.capture="log(4)" style="background-color: #fff">
 点击这里
 </div>
 </div>
 </div>
</div>

控制台打印结果为：1 2 3 4 4 3 2 1