本文主要介绍 事件冒泡 和 事件捕获 以及Vue中的capture
含义:从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发,也就是说事件从最上一级元素开始往下查找,直到捕获到事件目标(target)。 直白点:事件触发顺序 父元素->子元素
含义:从最不精确的对象(document 对象)开始触发,而后到最精确对象(也能够在窗口级别捕获事件,不过必须由开发人员特别指定),也就是说事件从事件目标(target)开始,往上冒泡直到页面的最上一级元素。 直白点:事件触发顺序 子元素->父元素
W3C标准事件监听实际上是事件冒泡和事件捕获的混合体,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。而后,再从事件源往上进行事件冒泡,直到到达document。 使用`addEventListener函数`能够自由选择事件冒泡和事件捕获
element.addEventListener(event-name, callback, use-capture);
表示在 element 这个对象上面添加一个事件监听器,当监听到有 event-name 事件发生的时候,调用 callback 这个回调函数。 use-capture 这个参数,表示该事件监听是在“捕获”阶段中监听(设置为 true)仍是在“冒泡”阶段中监听(设置为 false)。
代码直接粘走执行,效果很明了javascript
在冒泡阶段中监听事件(默认)
<!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就是事件捕获html
首先能帮到你最好,写的不对的地方也请多多见谅,请帮我指正出来,欢迎大牛们来!!!vue
要是对你有帮助,或者觉着写的还能够,能够 推荐和收藏!
3Q!java