Vue中的event對象介紹
一、什么是event對象
event對象:代表的是事件的狀態(tài)。比如獲取當前的元素:e.Target。
二、事件冒泡
什么是事件冒泡呢?百度百科的解釋如下:
當事件發(fā)生后,這個事件就要開始傳播(從里到外或者從外向里)。為什么要傳播呢?因為事件源本身(可能)并沒有處理事件的能力,即處理事件的函數(shù)(方法)并未綁定在該事件源上。例如我們點擊一個按鈕時,就會產(chǎn)生一個click事件,但這個按鈕本身可能不能處理這個事件,事件必須從這個按鈕傳播出去,從而到達能夠處理這個事件的代碼中(例如我們給按鈕的onclick屬性賦一個函數(shù)的名字,就是讓這個函數(shù)去處理該按鈕的click事件),或者按鈕的父級綁定有事件函數(shù),當該點擊事件發(fā)生在按鈕上,按鈕本身并無處理事件函數(shù),則傳播到父級去處理。
可能下面的例子會更容易理解一些:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>事件冒泡</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js" ></script> <script> window.onload=function(){ // 構(gòu)建vue實例 new Vue({ el:"#my", data:{ }, // 方法 methods:{ play1:function(){ console.log("我的div1"); }, play2:function(){ console.log("我的div2"); }, play3:function(){ console.log("我的div3"); } } }) } </script> </head> <body> <div id="my"> <div @click="play1">我的div1 <div @click="play2">我的div2 <div @click="play3"> 我的div3 </div> </div> </div> </div> </body> </html>
效果:
在上面的代碼中,3個div分別綁定了3個不同的事件,點擊"我的div3"的時候
那么該如何阻止事件冒泡呢?
1、原始JS中的處理方法
代碼示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>事件冒泡</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js" ></script> <script> window.onload=function(){ // 構(gòu)建vue實例 new Vue({ el:"#my", data:{ }, // 方法 methods:{ play1:function(){ console.log("我的div1"); }, play2:function(){ console.log("我的div2"); }, play3:function(e){ console.log("我的div3"); e.stopPropagation(); } } }) } </script> </head> <body> <div id="my"> <div @click="play1">我的div1 <div @click="play2">我的div2 <div @click="play3($event)"> 我的div3 </div> </div> </div> </div> </body> </html>
效果:
2、vue中處理方法
代碼示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>事件冒泡</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js" ></script> <script> window.onload=function(){ // 構(gòu)建vue實例 new Vue({ el:"#my", data:{ }, // 方法 methods:{ play1:function(){ console.log("我的div1"); }, play2:function(){ console.log("我的div2"); }, play3:function(e){ console.log("我的div3"); //e.stopPropagation(); } } }) } </script> </head> <body> <div id="my"> <div @click="play1">我的div1 <div @click="play2">我的div2 <div @click="play3($event)"> 我的div3 </div> <!--Vue中使用事件修飾符阻止冒泡--> <div @click.stop="play3($event)"> 我的div4 </div> </div> </div> </div> </body> </html>
效果:
點擊"我的div4"的時候會阻止事件冒泡,但點擊"我的div3"的時候不會阻止事件冒泡。
三、事件的默認動作
看下面的代碼示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>事件冒泡</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js" ></script> <script> window.onload=function(){ // 構(gòu)建vue實例 new Vue({ el:"#my", data:{ }, // 方法 methods:{ play1:function(){ console.log("我的div1"); }, play2:function(){ console.log("我的div2"); }, play3:function(e){ console.log("我的div3"); //e.stopPropagation(); }, play4:function(e){ console.log("我是超鏈接"); } } }) } </script> </head> <body> <div id="my"> <div @click="play1">我的div1 <div @click="play2">我的div2 <div @click="play3($event)"> 我的div3 </div> <!--Vue中使用事件修飾符阻止冒泡--> <div @click.stop="play3($event)"> 我的div4 </div> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="play4($event)">click</a> </div> </div> </div> </body> </html>
效果:
點擊“click”的時候會發(fā)現(xiàn)頁面跳轉(zhuǎn)到了百度,不會進入play4事件,如果調(diào)試代碼想進入play4事件該如何處理呢?
1、使用原生JS處理
代碼示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>事件冒泡</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js" ></script> <script> window.onload=function(){ // 構(gòu)建vue實例 new Vue({ el:"#my", data:{ }, // 方法 methods:{ play1:function(){ console.log("我的div1"); }, play2:function(){ console.log("我的div2"); }, play3:function(e){ console.log("我的div3"); //e.stopPropagation(); }, play4:function(e){ console.log("我是超鏈接"); // 取消事件的默認動作 e.preventDefault(); } } }) } </script> </head> <body> <div id="my"> <div @click="play1">我的div1 <div @click="play2">我的div2 <div @click="play3($event)"> 我的div3 </div> <!--Vue中使用事件修飾符阻止冒泡--> <div @click.stop="play3($event)"> 我的div4 </div> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="play4($event)">click</a> </div> </div> </div> </body> </html>
效果:
這里在點擊“click”的時候就不會進入百度首頁了。這里沒有處理冒泡,所以會觸發(fā)play2和play1事件。
2、使用vue處理
代碼示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>事件冒泡</title> <!--引入vue.js--> <script src="node_modules/vue/dist/vue.js" ></script> <script> window.onload=function(){ // 構(gòu)建vue實例 new Vue({ el:"#my", data:{ }, // 方法 methods:{ play1:function(){ console.log("我的div1"); }, play2:function(){ console.log("我的div2"); }, play3:function(e){ console.log("我的div3"); //e.stopPropagation(); }, play4:function(e){ console.log("我是超鏈接"); // 取消事件的默認動作 //e.preventDefault(); } } }) } </script> </head> <body> <div id="my"> <div @click="play1">我的div1 <div @click="play2">我的div2 <div @click="play3($event)"> 我的div3 </div> <!--Vue中使用事件修飾符阻止冒泡--> <div @click.stop="play3($event)"> 我的div4 </div> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="play4($event)">click</a> <!--使用vue處理--> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent.stop="play4($event)">click2</a> </div> </div> </div> </body> </html>
效果:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue2.0如何實現(xiàn)echarts餅圖(pie)效果展示
這篇文章主要介紹了vue2.0如何實現(xiàn)echarts餅圖(pie)效果展示,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10Vue選項之propsData傳遞數(shù)據(jù)方式
這篇文章主要介紹了Vue選項之propsData傳遞數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10詳解利用eventemitter2實現(xiàn)Vue組件通信
這篇文章主要介紹了詳解利用eventemitter2實現(xiàn)Vue組件通信,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-11-11vue中實現(xiàn)當前時間echarts圖表時間軸動態(tài)的數(shù)據(jù)(實例代碼)
這篇文章主要介紹了vue中實現(xiàn)當前時間echarts圖表時間軸動態(tài)的數(shù)據(jù),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10vue使用JSEncrypt對密碼本地存儲時加解密的實現(xiàn)
本文主要介紹了vue使用JSEncrypt對密碼本地存儲時加解密,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07