本文主要简述了event 对象，顺便复习了一下事件句柄 (Event Handlers)，键盘的一些属性，以及最容易遇到的事件冒泡，同样的阻止事件冒泡，在vue 下是怎样解决的，vue 提供了那些方便去阻止事件冒泡。
1.事件句柄 (Event Handlers)
HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。
看图：
image.png
vue事件前面都是没有on,例如：
@click="vclick($event)"
图片素材截图于w3school
2.鼠标/键盘属性
image.png
说明：上面是属于event 对象的属性
例子：
function box2click(event){
// alert(1);
console.log('box2');
console.log(event);
if(event.altKey){
console.log('事件被触发时候 alt 键被按下');
}
}
3.IE属性
image.png
4.标准 Event 属性
image.png
type 可以知道是那个事件类型如
image.png
5.标准的Event 方法
image.png
6.以前的事件冒泡
div 里面放一个按钮，给div和按钮都加上点击事件
image.png
javascript处理方法：
// 以前获取事件的方式
function btnclick(event){
// alert(1);
console.log('以前的');
console.log(event);
//以前停止事件冒泡的方法
//eventent.stopPropagation();
}
function box2click(event){
// alert(1);
console.log('box2');
console.log(event);
if(event.altKey){
console.log('事件被触发时候 alt 键被按下');
}
}
对比vue 的方式
html 部分：
image.png
javascript 部分：
var vm = new Vue({
el:'body',
data () {
return {
msg:'hello'
}
},
methods: {
vclick(event){
// alert('vue click');
console.log(event);
console.log('btn');
//event.stopPropagation();
event.cancelBubble=true;
},
boxClick(event){
// alert('box click');
console.log(event);
}
}
})
阻止冒泡简写方式：
html关键部分：
image.png
methods 方法部分：
stopClick(){
console.log('stopClick');
}
阻止默认事件
html部分：
image.png
methods 方法部分：
// 阻止鼠标右键
menuClick(){
alert('menu');
// event.preventDefault();
}
键盘事件
image.png
var vm = new Vue({
el:'body',
methods: {
keydownFnc(event){
console.log(event);
console.log(event.keyCode)
}
}
})
vue 提供了一些常用的方法，例如 @keyup.enter 按回车事件被触发。
键盘事件的代码链接
其他：
vue1.x 基础使用（一）
