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、事件冒泡、阻止事件的默认行为代码