本文主要簡述了event 對象确虱，順便復(fù)習(xí)了一下事件句柄 (Event Handlers)含友，鍵盤的一些屬性，以及最容易遇到的事件冒泡校辩，同樣的阻止事件冒泡窘问，在vue 下是怎樣解決的，vue 提供了那些方便去阻止事件冒泡宜咒。
1.事件句柄 (Event Handlers)
HTML 4.0 的新特性之一是能夠使 HTML 事件觸發(fā)瀏覽器中的行為惠赫，比如當(dāng)用戶點(diǎn)擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表故黑，可將之插入 HTML 標(biāo)簽以定義事件的行為儿咱。
看圖：
image.png
vue事件前面都是沒有on,例如：
@click="vclick($event)"
圖片素材截圖于w3school
2.鼠標(biāo)/鍵盤屬性
image.png
說明：上面是屬于event 對象的屬性
例子：
function box2click(event){
// alert(1);
console.log('box2');
console.log(event);
if(event.altKey){
console.log('事件被觸發(fā)時候 alt 鍵被按下');
}
}
3.IE屬性
image.png
4.標(biāo)準(zhǔn) Event 屬性
image.png
type 可以知道是那個事件類型如
image.png
5.標(biāo)準(zhǔn)的Event 方法
image.png
6.以前的事件冒泡
div 里面放一個按鈕，給div和按鈕都加上點(diǎn)擊事件
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('事件被觸發(fā)時候 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關(guān)鍵部分：
image.png
methods 方法部分：
stopClick(){
console.log('stopClick');
}
阻止默認(rèn)事件
html部分：
image.png
methods 方法部分：
// 阻止鼠標(biāo)右鍵
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 按回車事件被觸發(fā)混埠。
鍵盤事件的代碼鏈接
