[js高手之路] vue系列教程 - 事件专题(4)

本文主要讲解事件冒泡，事件绑定的简写，事件默认行为，按键码等一系列与事件相关的知识.

一、事件绑定的简写，@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用的是v-on绑定

     window.onload = function(){
         var c = new Vue({
             el : 'body',
             methods : {
                 say : function(){
                     alert( '你好' );
                 }
             }
         });
     }

 <input type="button" value="点我" @click="say();"/>

二、传递事件对象

     window.onload = function(){
         var c = new Vue({
             el : 'body',
             methods : {
                 say : function(e){
                     alert( e.clientX );
                 }
             }
         });
     }

 <input type="button" value="点我" @click="say($event);"/>

三、事件冒泡

     window.onload = function(){
         var c = new Vue({
             el : 'body',
             methods : {
                 say : function(){
                    alert('你好');
                 },
                 say2 : function(){
                     alert( '你好啊' );
                 }
             }
         });
     }

     <div id="box">
         <div @click="say2();">
             <input type="button" value="点我" @click="say();"/>
         </div>
     </div>

四、阻止事件冒泡：有两种方式，一种是原生方式，一种是vue提供的stop

         var c = new Vue({
                 el: 'body',
                 methods: {
                     say: function (ev) {
                         alert('你好');
                         ev.cancelBubble = true;
                     },
                     say2: function () {
                         alert('你好啊');
                     }
                 }
             });

 <div id="box">
     <div @click="say2();">
         <input type="button" value="点我" @click="say($event);"/>
     </div>
 </div>

  window.onload = function () {
             var c = new Vue({
                 el: 'body',
                 methods: {
                     say: function (ev) {
                         alert('你好');
                     },
                     say2: function () {
                         alert('你好啊');
                     }
                 }
             });
         }

 <div id="box">
     <div @click="say2();">
         <input type="button" value="点我" @click.stop="say();"/>
     </div>
 </div>

五、右键菜单的默认行为: 弹出右键菜单

         window.onload = function () {
             var c = new Vue({
                 el: 'body',
                 methods: {
                     say: function () {
                         alert('你好');  //执行完之后 会弹出右键菜单
                     }
                 }
             });
         }

 <input type="button" value="点我" @contextmenu="say();"/>

2种方式阻止右键菜单的默认行为：

原生方式：

         window.onload = function () {
             var c = new Vue({
                 el: 'body',
                 methods: {
                     say: function (ev) {
                         alert('你好');  //执行完之后 会弹出右键菜单
                         ev.preventDefault();
                     }
                 }
             });
         }

 <div id="box">
     <input type="button" value="点我" @contextmenu="say($event);"/>
 </div>

vue提供的prevent方式

         window.onload = function () {
             var c = new Vue({
                 el: 'body',
                 methods: {
                     say: function () {
                         alert('你好');
                     }
                 }
             });
         }

         <div id="box">
             <input type="button" value="点我" @contextmenu.prevent="say();"/>
         </div>

keydown事件绑定:

         window.onload = function () {
             var c = new Vue({
                 el: 'body',
                 methods: {
                     say: function () {
                         alert('你好');
                     }
                 }
             });
         }

         <div id="box">
             <input type="text" @keydown="say();"/>
         </div>

按键码keycode:

         window.onload = function () {
             var c = new Vue({
                 el: 'body',
                 methods: {
                     say: function (ev) {
                         alert( ev.keyCode );
                     }
                 }
             });
         }

         <div id="box">
             <input type="text" @keydown="say($event);"/>
         </div>

按键的判断方式： 按键码与英文方法

1，根据回车键的按键码keycode等于13判断

         window.onload = function () {
             var c = new Vue({
                 el: 'body',
                 methods: {
                     say: function (ev) {
                         if( ev.keyCode == 13 ){
                            alert( '你按下去的是回车键' );
                         }
                     }
                 }
             });
         }

         <div id="box">
             <input type="text" @keyup="say($event);"/>
         </div>

简写方式：

         methods: {
                     say: function () {
                        alert( '你按下去的是回车键' );
                     }
                 }

 //html代码
 <input type="text" @keyup.13="say();"/>

enter判断:

         methods: {
                     say: function () {
                        alert( '你按下去的是回车键' );
                     }
                 }
 //html代码
 <input type="text" @keyup.enter="say();"/>

方向键判断：

         window.onload = function () {
             var c = new Vue({
                 el: 'body',
                 methods: {
                     say: function () {
                         alert('左方向键');
                     },
                     say2: function () {
                         alert('右方向键');
                     },
                     say3: function () {
                         alert('上方向键');
                     },
                     say4: function () {
                         alert('下方向键');
                     },
                 }
             });
         }

 <div id="box">
     <input type="text" @keyup.left="say();"/>
     <input type="text" @keyup.right="say2();"/>
     <input type="text" @keyup.up="say3();"/>
     <input type="text" @keyup.down="say4();"/>
     <br/>
     <input type="text" @keyup.37="say();"/>
     <input type="text" @keyup.39="say2();"/>
     <input type="text" @keyup.38="say3();"/>
     <input type="text" @keyup.40="say4();"/>
 </div>