Vue中的event對(duì)象介紹
一、什么是event對(duì)象
event對(duì)象:代表的是事件的狀態(tài)。比如獲取當(dāng)前的元素:e.Target。
二、事件冒泡
什么是事件冒泡呢?百度百科的解釋如下:
當(dāng)事件發(fā)生后,這個(gè)事件就要開始傳播(從里到外或者從外向里)。為什么要傳播呢?因?yàn)槭录幢旧恚赡埽┎]有處理事件的能力,即處理事件的函數(shù)(方法)并未綁定在該事件源上。例如我們點(diǎn)擊一個(gè)按鈕時(shí),就會(huì)產(chǎn)生一個(gè)click事件,但這個(gè)按鈕本身可能不能處理這個(gè)事件,事件必須從這個(gè)按鈕傳播出去,從而到達(dá)能夠處理這個(gè)事件的代碼中(例如我們給按鈕的onclick屬性賦一個(gè)函數(shù)的名字,就是讓這個(gè)函數(shù)去處理該按鈕的click事件),或者按鈕的父級(jí)綁定有事件函數(shù),當(dāng)該點(diǎn)擊事件發(fā)生在按鈕上,按鈕本身并無處理事件函數(shù),則傳播到父級(jí)去處理。
可能下面的例子會(huì)更容易理解一些:
<!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實(shí)例 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個(gè)div分別綁定了3個(gè)不同的事件,點(diǎn)擊"我的div3"的時(shí)候
那么該如何阻止事件冒泡呢?
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實(shí)例 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實(shí)例 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>
效果:
點(diǎn)擊"我的div4"的時(shí)候會(huì)阻止事件冒泡,但點(diǎn)擊"我的div3"的時(shí)候不會(huì)阻止事件冒泡。
三、事件的默認(rèn)動(dòng)作
看下面的代碼示例:
<!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實(shí)例 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>
效果:
點(diǎn)擊“click”的時(shí)候會(huì)發(fā)現(xiàn)頁面跳轉(zhuǎn)到了百度,不會(huì)進(jìn)入play4事件,如果調(diào)試代碼想進(jìn)入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實(shí)例 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("我是超鏈接"); // 取消事件的默認(rèn)動(dòng)作 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>
效果:
這里在點(diǎn)擊“click”的時(shí)候就不會(huì)進(jìn)入百度首頁了。這里沒有處理冒泡,所以會(huì)觸發(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實(shí)例 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("我是超鏈接"); // 取消事件的默認(rèn)動(dòng)作 //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>
效果:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0如何實(shí)現(xiàn)echarts餅圖(pie)效果展示
這篇文章主要介紹了vue2.0如何實(shí)現(xiàn)echarts餅圖(pie)效果展示,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue-cli3.x配置全局的scss的時(shí)候報(bào)錯(cuò)問題及解決
這篇文章主要介紹了vue-cli3.x配置全局的scss的時(shí)候報(bào)錯(cuò)問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue選項(xiàng)之propsData傳遞數(shù)據(jù)方式
這篇文章主要介紹了Vue選項(xiàng)之propsData傳遞數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10詳解利用eventemitter2實(shí)現(xiàn)Vue組件通信
這篇文章主要介紹了詳解利用eventemitter2實(shí)現(xiàn)Vue組件通信,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11vue中實(shí)現(xiàn)當(dāng)前時(shí)間echarts圖表時(shí)間軸動(dòng)態(tài)的數(shù)據(jù)(實(shí)例代碼)
這篇文章主要介紹了vue中實(shí)現(xiàn)當(dāng)前時(shí)間echarts圖表時(shí)間軸動(dòng)態(tài)的數(shù)據(jù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10vue使用JSEncrypt對(duì)密碼本地存儲(chǔ)時(shí)加解密的實(shí)現(xiàn)
本文主要介紹了vue使用JSEncrypt對(duì)密碼本地存儲(chǔ)時(shí)加解密,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07