vue1.x 事件对象（二）

本文主要简述了event 对象，顺便复习了一下事件句柄　(Event Handlers)，键盘的一些属性，以及最容易遇到的事件冒泡，同样的阻止事件冒泡，在vue 下是怎样解决的，vue 提供了那些方便去阻止事件冒泡。

1.事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。
看图：

vue事件前面都是没有on,例如：

 @click="vclick($event)"

图片素材截图于w3school

2.鼠标/键盘属性

说明：上面是属于event 对象的属性
例子：

    function box2click(event){        // alert(1);        console.log('box2');        console.log(event);        if(event.altKey){            console.log('事件被触发时候 alt 键被按下');        }    }

3.IE属性

4.标准 Event 属性

type 可以知道是那个事件类型如

5.标准的Event 方法

6.以前的事件冒泡

div 里面放一个按钮，给div和按钮都加上点击事件

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 部分：

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关键部分：

methods 方法部分：

      stopClick(){          console.log('stopClick');      }

阻止默认事件

html部分：

methods 方法部分：

    // 阻止鼠标右键    menuClick(){       alert('menu');       // event.preventDefault();    }

事件的对象代码

键盘事件

    var vm = new Vue({        el:'body',        methods: {            keydownFnc(event){                console.log(event);                console.log(event.keyCode)            }        }    })

vue 提供了一些常用的方法，例如 @keyup.enter 按回车事件被触发。
键盘事件的代码链接

其他：
vue1.x 基础使用（一）