Vue事件

1，回顾js中的事件？

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

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

        在js中，给标签添加事件相应有3种，1是HTML事件 ：在标签属性中添加事件属性，比如，这种做法必须加上前缀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的标签在被点击之后会自动进行页面跳转，这就是标签的默认事件，可以使用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才能触发。

8，表单事件？

答：表单指的是form标签形成的一个盒子，它由许多标签元素组成，如input、checkbox等。 

 

 

 

 

 

 

 9，窗口事件？

答：窗口事件指的是浏览器整体窗口的变化。主要是onscroll和onresize事件。

10，焦点事件和剪贴板事件？

答：当一个标签获得或者失去焦点时响应的事件。

 

 

 

 11，网页状态事件？

答：指的是HTML页面加载状态的变化，或者一张图片的加载状态。

 

 

        readystatechange 事件 于网络请求有关系。

 12，touch事件？

答：在移动端的事件。必须使用addeventListener进行添加。

 

13，事件代理？

答：由于事件冒泡，被嵌套DOM响应之后会传递到最外层DOM，所以可以把事件都加到最外层DOM节点上统一相应，这叫做数据代理。 

14，键盘事件修饰符？

答：让指定按键被按下时才相应事件。例如：keydown.enter表示回车enter被按下。 keydown.别名，或者keydown.caps-lock，或者keydown.自定义别名，或者keydown.keycode等。

 

15，event事件对象的一些属性？

答：针对不同的事件类型，浏览器生成的event事件对象属性有所不同。