本文主要讲解事件冒泡，事件绑定的简写，事件默认行为，按键码等一系列与事件相关的知识.
一、事件绑定的简写，@事件类型. 之前我的[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>