Vue中的事件与常见的问题处理

Vue的事件：获取事件对象$event；

事件冒泡：事件会向上传播

原生js阻止事件冒泡，需要先获取事件对象，再调用stopPropagation()方法；

vue事件修饰符stop，例@clik.stop；

事件默认行为：

原生js方式需要获取事件对象，再调用preventDefault()方法；

在vue中则使用修饰符prevent，例@clik.prevent

先在button中加入获取对象$event

在控制台可以打印出该事件，可以看出target中有innerHTML

通过e.target.innerHTML,获取button标签上的名称：

vue；

<script>
        window.onload= () =>{

            let vm=new Vue({
            el:'#two',
            data:{
                result:0

            },
            methods:{

                show(e){

                alert("欢迎来到perfect*博客园！！！");
                console.log('欢迎来到perfect*博客园！！！');
                console.log(e.target.innerHTML);
            },

                add(a,b){
                    console.log("add");
                    console.log(this==vm);
                    this.result +=a+b;

                }
            }
            })
        }

</script>

html:

<body>
        <div id="two">
        <button  @click="show($event)">欢迎来到perfect*博客园 A</button>
            <button  @click="show($event)">欢迎来到perfect*博客园 B</button>

           <button @click="add(1,2)">进行绑定数据相加的方法add()</button>
            result:{{result}}

      </div>
    </body>

绑定mouseenter时可以一直触发

<button @mouseenter="add(10,20)">进行绑定数据相加的方法add()</button><br/>
            result:{{result}}<br/>
        

当使用once时只能触发一次，之后鼠标进入时无效果：

<button @mouseenter.once="add(10,20)">进行绑定数据相加的方法add()</button><br/>
            result:{{result}}<br/>

事件冒泡：

点击一个获取对象的事件按钮，会发生调用写的三个方法：

该问题的代码：

<script>
        window.onload= () =>{

            let vm=new Vue({
            el:'#two',
            data:{
                result:0

            },
            methods:{

            show(e){

                console.log('欢迎来到perfect*博客园！！！');
                console.log(e.target.innerHTML);
                },

               showA(){

                  console.log('欢迎来到perfect*博客园！！！A');
               },
                showB(){

                  console.log('欢迎来到perfect*博客园！！！B');
               },

            }
            })
        }

</script>

    <body>
        <div id="two">

    <!--事件冒泡-->
    <div @click="showA()">

        <div @click="showB()">
            <button @click="show($event)">欢迎来到perfect*博客园 A!!!!!!</button>
        </div>
    </div>

      </div>
    </body>

解决冒泡问题的方法：

vue:在button事件中获取对象的button中的click加.stop即可；

javascript:使用e.stopPropagation();

从图中可以看出来，使用.stop时只使用了show方法

<button @click.stop="show($event)">欢迎来到perfect*博客园 A!!!!!!</button>

JavaScript代码：

    show(e){

                console.log('欢迎来到perfect*博客园！！！');
                console.log(e.target.innerHTML);
                e.stopPropagation();
                }

阻止事件的默认行为

vue:使用.prevent进行阻止;

javascript:使用e.preventDefault()实现;

使用a标签作为示例，初始时可以跳转：

使用.prevent时，怎么点击都不能进行跳转：

HTML：

<!--    阻止事件的默认行为-->
<a href="HelloVue.html" @click.prevent=showLink($event)>Click Link!!!</a>

vue:

showLink(){
                console.log("已阻止链接的跳转！！");

            }

使用JavaScript的写法效果同上，代码：

HTML：

<!--    阻止事件的默认行为-->
<a href="HelloVue.html" @click=showLink($event)>Click Link!!!</a>

vue:

showLink(e){
                console.log("已阻止链接的跳转！！");
                e.preventDefault();

            }

以上示例所有的代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>event</title>
     </head>
     <script type="text/javascript" src="../js/vue.js" ></script>
     <script>
         window.onload= () =>{

             let vm=new Vue({
             el:'#two',
             data:{
                 result:0

             },
             methods:{

 //            show(e){
 //
 //
 //                console.log('欢迎来到perfect*博客园！！！');
 //                console.log(e.target.innerHTML);
 //                e.stopPropagation();
 //                },

 //                add(a,b){
 //                    console.log("add");
 //                    console.log(this==vm);
 //                    this.result +=a+b;
 //
 //                }，

 //
 //             showA(){
 //
 //                console.log('欢迎来到perfect*博客园！！！A');
 //             },
 //              showB(){
 //
 //                console.log('欢迎来到perfect*博客园！！！B');
 //             },

             showLink(e){
                 console.log("已阻止链接的跳转！！");
                 e.preventDefault();

             }

         }

             })
         }

 </script>

     <body>
         <div id="two">
         <!--<button  @click="show($event)">欢迎来到perfect*博客园 A</button><br/>
             <button  @click="show($event)">欢迎来到perfect*博客园 B</button><br/>

            <button @click="add(1,2)">进行绑定数据相加的方法add()</button><br/>
             result:{{result}}<br/>

           <button @mouseenter.once="add(10,20)">进行绑定数据相加的方法add()</button><br/>
             result:{{result}}<br/>
         -->

     <!--事件冒泡-->
     <!--<div @click="showA()">

         <div @click="showB()">
             <button @click="show($event)">欢迎来到perfect*博客园 A!!!!!!</button>
         </div>
     </div>-->

 <!--    阻止事件的默认行为-->
 <a href="HelloVue.html" @click=showLink($event)>Click Link!!!</a>

       </div>
     </body>
 </html>

$event、事件冒泡、阻止事件的默认行为代码