其实这一块的内容并不难，但总是看后就忘。记录于此方便以后查阅，并与大家分享。
首先给大家画一个示意图，理解一下什么是冒泡和捕获
- 冒泡：事件由内而外依次触发
- 捕获：事件由外向内依次触发
冒泡与捕获示意图
如果你看不懂上图，那证明你想复杂了。简而言之：冒泡就是 由内而外 依次触发事件，捕获则是 由外向内 依次触发事件。
.stop 修饰符
请看如下代码：
<template>
<div class="box1" @click="test1">
<span>测试1</span>
<div class="box2" @click="test2">
<span>测试2</span>
</div>
</div>
</template>
<script>
export default {
methods:{
test1(){
console.log('test1')
},
test2(){
console.log('test2')
}
}
}
</script>
<style scoped lang="scss">
.app {
display: flex;
justify-content: center;
align-items: center;
.box1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #d09966;
color: #fff;
width: 200px;
height: 200px;
.box2 {
display: flex;
justify-content: center;
align-items: center;
background: #e06c75;
color: #fff;
margin-top: 20px;
width: 50px;
height: 50px;
}
}
}
</style>
由以上代码可以看到我们有一个嵌套的div，每一个div都绑定着一个事件，如果我们点击div的话是按什么顺序触发这两个事件的呢。其实是默认按照冒泡的方式触发的，简单来说就是由内而外，如果还是不明白请看上面的解析图。
此Vue文件最终生成的界面是这个样子的
结果
当我们点击 测试2 区域的时候，默认按照冒泡方式触发函数，控制台打印结果如下：
image.png
现在就是.stop发挥作用的时候了，修改代码如下
<template>
<div class="box1" @click="test1">
<span>测试1</span>
<div class="box2" @click.stop="test2">
<span>测试2</span>
</div>
</div>
</template>
这样我们在点击之后控制台打印结果如下
image.png
由这个结果我们可以看到，这个修饰符的作用就是阻止事件冒泡，不让他向外去执行函数，到此为止
.capture 修饰符
如上一节所说，网页默认是按照冒泡方式去触发事件的，但是当我们使用.capture修饰符时，网页就会按照捕获的方式触发事件，也就是从外向内执行。但是这个时候一定要注意 .capture修饰符一定要写在外层才能生效。
<template>
<div class="app">
<div class="box1" @click.capture="test1">
<span>测试1</span>
<div class="box2" @click="test2">
<span>测试2</span>
</div>
</div>
</div>
</template>
当我们点击 测试2 区域之后，控制台的打印如下
image.png
. prevent 修饰符
现在，我们再来说一下 .prevent 修饰符，其作用就是阻止组件本来应该发生的事件，转而去执行自己定义的事件
考虑以下代码：
<template>
<div>
<a href="https://github.com/stevecchow" @click.prevent="test">该链接点击后不会跳转</a>
</div>
</template>
<script>
export default {
methods:{
test2(){
console.log('test')
}
}
}
</script>
我们在上述代码中添加了 .prevent 修饰符，接下来的结果我们能够预料到，点击链接之后，网页不会跳转到我写的网址中，而是在控制台打印出了如下结果：
image.png
而当我们去掉 .prevent 修饰符 后，点击该链接则会执行 a 标签的默认行为，根据链接跳转到相应网址。
.once 修饰符
从名称可以看出，该修饰符具有“唯一性”的内涵。加上此修饰符之后，无论你点击多少下，相应的函数只允许被触发一次，函数就只触发一次。
.self 修饰符
添加该修饰符后，只有当前元素自身触发处理函数时，事件才会触发。
原理：是根据 event.target 确定是否当前元素本身，来决定是否触发的事件/函数。
考虑如下代码：
<template>
<div class="box1" @click.self="test1">
<span>测试1</span>
<div class="box2" @click="test2">
<span>测试2</span>
</div>
</div>
</template>
当我们点击 测试2 的时候，冒泡不会执行（test1 方法不会执行），因为 event.target 指的是 测试2 的dom元素，不是外部 测试1 的，所以不会触发 test1 的点击事件
. passive 修饰符
passive 这个修饰符会执行默认方法。你们可能会问，明明默认执行为什么会设置这样一个修饰符。这就要说一下这个修饰符的本意了。
浏览器只有等内核线程执行到事件监听器对应的 JavaScript 代码时，才能知道内部是否会调用 preventDefault 函数来阻止事件的默认行为，所以浏览器本身是没有办法对这种场景进行优化的。这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿。
通俗点说就是每次事件产生，浏览器都会去查询一下是否有 preventDefault 阻止该次事件的默认动作。我们加上 passive 就是为了告诉浏览器，不用查询了，我们没用 preventDefault 阻止默认动作。
这里一般用在滚动监听，@scoll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询 prevent 会使滑动卡顿。我们通过 passive 将内核线程查询跳过，可以大大提升滑动的流畅度。
注：passive 和 prevent 冲突，不能同时绑定在一个监听器上。
网友评论