[js高手之路] vue系列教程 - 事件专题(4)
本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识.
一、事件绑定的简写,@事件类型. 之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用的是v-on绑定
1 window.onload = function(){ 2 var c = new Vue({ 3 el : 'body', 4 methods : { 5 say : function(){ 6 alert( '你好' ); 7 } 8 } 9 }); 10 }
1 <input type="button" value="点我" @click="say();"/>
二、传递事件对象
1 window.onload = function(){ 2 var c = new Vue({ 3 el : 'body', 4 methods : { 5 say : function(e){ 6 alert( e.clientX ); 7 } 8 } 9 }); 10 }
1 <input type="button" value="点我" @click="say($event);"/>
三、事件冒泡
1 window.onload = function(){ 2 var c = new Vue({ 3 el : 'body', 4 methods : { 5 say : function(){ 6 alert('你好'); 7 }, 8 say2 : function(){ 9 alert( '你好啊' ); 10 } 11 } 12 }); 13 }
1 <div id="box"> 2 <div @click="say2();"> 3 <input type="button" value="点我" @click="say();"/> 4 </div> 5 </div>
四、阻止事件冒泡:有两种方式,一种是原生方式,一种是vue提供的stop
1 var c = new Vue({ 2 el: 'body', 3 methods: { 4 say: function (ev) { 5 alert('你好'); 6 ev.cancelBubble = true; 7 }, 8 say2: function () { 9 alert('你好啊'); 10 } 11 } 12 });
1 <div id="box"> 2 <div @click="say2();"> 3 <input type="button" value="点我" @click="say($event);"/> 4 </div> 5 </div>
1 window.onload = function () { 2 var c = new Vue({ 3 el: 'body', 4 methods: { 5 say: function (ev) { 6 alert('你好'); 7 }, 8 say2: function () { 9 alert('你好啊'); 10 } 11 } 12 }); 13 }
1 <div id="box"> 2 <div @click="say2();"> 3 <input type="button" value="点我" @click.stop="say();"/> 4 </div> 5 </div>
五、右键菜单的默认行为: 弹出右键菜单
1 window.onload = function () { 2 var c = new Vue({ 3 el: 'body', 4 methods: { 5 say: function () { 6 alert('你好'); //执行完之后 会弹出右键菜单 7 } 8 } 9 }); 10 }
1 <input type="button" value="点我" @contextmenu="say();"/>
2种方式阻止右键菜单的默认行为:
原生方式:
1 window.onload = function () { 2 var c = new Vue({ 3 el: 'body', 4 methods: { 5 say: function (ev) { 6 alert('你好'); //执行完之后 会弹出右键菜单 7 ev.preventDefault(); 8 } 9 } 10 }); 11 }
1 <div id="box"> 2 <input type="button" value="点我" @contextmenu="say($event);"/> 3 </div>
vue提供的prevent方式
1 window.onload = function () { 2 var c = new Vue({ 3 el: 'body', 4 methods: { 5 say: function () { 6 alert('你好'); 7 } 8 } 9 }); 10 } 11 12 <div id="box"> 13 <input type="button" value="点我" @contextmenu.prevent="say();"/> 14 </div>
keydown事件绑定:
1 window.onload = function () { 2 var c = new Vue({ 3 el: 'body', 4 methods: { 5 say: function () { 6 alert('你好'); 7 } 8 } 9 }); 10 } 11 12 <div id="box"> 13 <input type="text" @keydown="say();"/> 14 </div>
按键码keycode:
1 window.onload = function () { 2 var c = new Vue({ 3 el: 'body', 4 methods: { 5 say: function (ev) { 6 alert( ev.keyCode ); 7 } 8 } 9 }); 10 } 11 12 <div id="box"> 13 <input type="text" @keydown="say($event);"/> 14 </div>
按键的判断方式: 按键码与英文方法
1,根据回车键的按键码keycode等于13判断
1 window.onload = function () { 2 var c = new Vue({ 3 el: 'body', 4 methods: { 5 say: function (ev) { 6 if( ev.keyCode == 13 ){ 7 alert( '你按下去的是回车键' ); 8 } 9 } 10 } 11 }); 12 } 13 14 <div id="box"> 15 <input type="text" @keyup="say($event);"/> 16 </div>
简写方式:
1 methods: { 2 say: function () { 3 alert( '你按下去的是回车键' ); 4 } 5 } 6 7 //html代码 8 <input type="text" @keyup.13="say();"/>
enter判断:
1 methods: { 2 say: function () { 3 alert( '你按下去的是回车键' ); 4 } 5 } 6 //html代码 7 <input type="text" @keyup.enter="say();"/>
方向键判断:
1 window.onload = function () { 2 var c = new Vue({ 3 el: 'body', 4 methods: { 5 say: function () { 6 alert('左方向键'); 7 }, 8 say2: function () { 9 alert('右方向键'); 10 }, 11 say3: function () { 12 alert('上方向键'); 13 }, 14 say4: function () { 15 alert('下方向键'); 16 }, 17 } 18 }); 19 }
1 <div id="box"> 2 <input type="text" @keyup.left="say();"/> 3 <input type="text" @keyup.right="say2();"/> 4 <input type="text" @keyup.up="say3();"/> 5 <input type="text" @keyup.down="say4();"/> 6 <br/> 7 <input type="text" @keyup.37="say();"/> 8 <input type="text" @keyup.39="say2();"/> 9 <input type="text" @keyup.38="say3();"/> 10 <input type="text" @keyup.40="say4();"/> 11 </div>
作者:ghostwu, 出处:http://www.cnblogs.com/ghostwu
博客大多数文章均属原创,欢迎转载,且在文章页面明显位置给出原文连接