Vue事件

1，回顾js中的事件？

答：标签的状态变化或者被外物改变则称为事件。一般js中的事件都是由浏览器捕捉得到，然后传递给js引擎，浏览器检测到HTML页面中某个标签元素发生了指定的事件，而对应的DOM节点必须去调用回调函数，但是DOM树只暴露了一个element根节点，所以去调用回调函数时不得不从element对象一步一步的去寻找发生事件的DOM节点（事件捕获），然后事件冒泡返回。任何HTML标签都能绑定事件。

所以，事件大概分为两部分：1，到底有哪些事件类型，比如鼠标移动、点击、滚轮等。2，事件的传播过程中的细节问题，比如阻止默认事件、在冒泡还是捕获阶段进行执行。

在js中，给标签添加事件相应有3种，1是HTML事件：在标签属性中添加事件属性，比如<button οnclick="func()">，这种做法必须加上前缀on。2是给DOM节点对象添加事件属性：dom1.οnclick=function(){}，这种做法必须加上前缀on。3是使用addeventListener(node_obj,function(){})进行添加。

event事件对象，浏览器察觉到事件发生后会生成一个event事件对象，并作为一个隐藏参数传递给事件的回调函数。根据事件类型不同，他的属性与方法也不同。
btn.onclick = function(e){
   console.log(e.currentTarget);
}
event隐参需要指定形参进行接收，且不能对这个形参进行赋值，否则无法使用event对象。事件默认在冒泡阶段被执行，如果冒泡时每一个层级都有回调函数，那么所有层级的回调函数都会被调用。

3，Vue中给dom节点绑定事件？

答：使用v-on指令即可。如v-on:click="func_name" 。而且func_name必须是Vue管理的方法，即配置在methods对象里面的函数。可以使用@符合进行简写，如@click="func_name"。

4，Vue绑定事件时进行参数传递？

答： @click="func_name(args1,args2,...)"。当存在参数时，且需要向形参传递数据，此时若要使用event事件对象，那么必须加上$event形参进行占位，如@click="func_name(args1,args2,$event,...)"，此时回调函数的第3个形参就是event事件对象。

5，Vue的事件修饰符？

答：HTML的<a>标签在被点击之后会自动进行页面跳转，这就是<a>标签的默认事件，可以使用event对象的 preventDefault()方法进行阻止。使用Vue指令时，使用事件修饰符可以避免这种情况，如 @click.prevent="func_name(args1,args2,...)"，Vue一共有6中事件修饰符。另外，wheel和scroll都能够时页面滚动，但是wheel会优先去执行回调函数，而scroll会优先相应页面渲染，所以使用@wheel.passive="func"。也可以连着写，如@wheel.passive.stop="func"，先passive再stop。

6，鼠标事件？

答：分为按下、抬起、单击、双击等。

7，键盘事件？

答：键盘分为按下keydown、抬起keyup两种，还有一些组合控制的按下抬起(ctrl、alt等必须被按住，然后其他键的抬起) 。另外还有一些按键的Keycode需要了解。当浏览器察觉到键盘事件时，会在event事件对象上加上一个KeyCode属性，用于记住案件的标识符，如enter的KeyCode为13。另外，keyup.ctrl.y表示必须按住ctrl+y才能触发。