前言
本文主要介绍 事件冒泡 和 事件捕获 以及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就是事件捕获
最后
首先能帮到你最好,写的不对的地方也请多多见谅,请帮我指正出来,欢迎大牛们来!!!
差点忘了
要是对你有帮助,或者觉着写的还可以,可以 推荐和收藏!
3Q!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。