[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>
上一篇:AngularJS路由系列(3)-- UI-Router初体验


下一篇:Linux 命令详解(十一)Shell 解析 json命令jq详解