快捷導(dǎo)航

Vue中的event對(duì)象介紹

更新時(shí)間：2022年03月14日 09:22:13 作者：.NET開發(fā)菜鳥

這篇文章介紹了Vue中的event對(duì)象，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、什么是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>

效果：