您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“Vue中的event對象怎么用”,內(nèi)容詳細,步驟清晰,細節(jié)處理妥當,希望這篇“Vue中的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"的時候
那么該如何阻止事件冒泡呢?
代碼示例如下:
<!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>
效果:
代碼示例如下:
<!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 href="http://www.baidu.com" 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事件該如何處理呢?
代碼示例如下:
<!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 href="http://www.baidu.com" 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事件。
代碼示例如下:
<!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 href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="play4($event)">click</a> <!--使用vue處理--> <a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent.stop="play4($event)">click2</a> </div> </div> </div> </body> </html>
效果:
讀到這里,這篇“Vue中的event對象怎么用”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內(nèi)容的文章,歡迎關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。