前言
本文主要介绍 事件冒泡 和 事件捕获 以及Vue中的capture
事件捕获
含义：从最特定的事件目标到最不特定的事件目标( document 对象)的顺序触发，也就是说事件从最上一级元素开始往下查找，直到捕获到事件目标( target )。
直白点：事件触发顺序为父元素->子元素
事件冒泡
含义：从最不精确的对象( document 对象)开始触发，然后到最精确对象(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)，也就是说事件从事件目标( target )开始，往上冒泡直到页面的最上一级元素。
直白点：事件触发顺序 子元素->父元素
事件冒泡和事件捕获-图解
W3C标准事件监听
W3C标准事件监听其实是事件冒泡和事件捕获的混合体，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达 document。
使用addEventListener函数可以自由选择事件冒泡和事件捕获。
element.addEventListener(event-name, callback, use-capture);
表示在 element 这个对象上面添加一个事件监听器，当监听到有 event-name 事件发生的时候，调用 callback 这个回调函数。 use-capture 这个参数，表示该事件监听是在“捕获”阶段中监听（设置为 true）还是在“冒泡”阶段中监听（设置为 false）。
Vue2.0中的capture
代码直接粘走执行,效果很明了
在冒泡阶段中监听事件(默认)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 20px;
transition: background 800ms;
}
ul {
height: 100%;
list-style: none;
background: hsl(193, 66%, 85%);
}
li {
height: 100%;
background: hsl(193, 66%, 95%);
}
.highlight {
background: red;
}
</style>
</head>
<body>
<div id="app">
<ul @click="callback($event)">
<li @click="callback($event)">One</li>
<ul @click="callback($event)">
<li @click="callback($event)">Two</li>
<ul @click="callback($event)">
<li @click="callback($event)">Three. Click Me!!!</li>
</ul>
</ul>
</ul>
</div>
<script>
var pause = 200;
new Vue({
el: "#app",
methods: {
callback(event) {
var ms = event.timeout = (event.timeout + pause) || 0;
var target = event.currentTarget;
console.log(target);
setTimeout(function() {
target.classList.add('highlight');
setTimeout(function() {
target.classList.remove('highlight');
}, pause);
}, ms);
}
}
})
</script>
</body>
</html>
添加修饰符.capture后 在捕获阶段中监听事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 20px;
transition: background 800ms;
}
ul {
height: 100%;
list-style: none;
background: hsl(193, 66%, 85%);
}
li {
height: 100%;
background: hsl(193, 66%, 95%);
}
.highlight {
background: red;
}
</style>
</head>
<body>
<div id="app">
<ul @click="callback($event)">
<li @click="callback($event)">One</li>
<ul @click="callback($event)">
<li @click="callback($event)">Two</li>
<ul @click="callback($event)">
<li @click="callback($event)">Three. Click Me!!!</li>
</ul>
</ul>
</ul>
</div>
<script>
var pause = 200;
new Vue({
el: "#app",
methods: {
callback(event) {
var ms = event.timeout = (event.timeout + pause) || 0;
var target = event.currentTarget;
console.log(target);
setTimeout(function() {
target.classList.add('highlight');
setTimeout(function() {
target.classList.remove('highlight');
}, pause);
}, ms);
}
}
})
</script>
</body>
</html>
在Vue.js中，我们用修饰符来达到事件监听是捕获还是冒泡阶段中监听的效果。
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
意思就是不加.capture是事件冒泡，加上.capture就是事件捕获。