前端系列——Vue事件处理（vue jsx 事件）

1、事件处理

（1）事件的三要素

事件源

事件类型

事件处理函数（监听器）

（2）使用事件的流程是什么？

a. 需要注册（绑定）事件

b. 需要触发事件

必须要有上述两个过程，并且他们是分开的。

2、监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<事件源标签 v-on:事件类型=“事件处理”></事件源标签>

（1）绑定方式 ：在Vue中，所有的事件，都是直接绑定元素上面的，不需要使用以前的绑定 方式。只能作为元素的属性来绑定。

事件类型和原来的dom中的事件类型完全一致，在绑定的时候，直接小写即可，不要加on。

鼠标事件：click，dblclick，mouseover，mouseout，mouseenter，mouseleave，mousedown，mousemove，mouseup

键盘事件：keydown，keypress，keyup

ui事件：scroll，resize，load，unload

焦点事件：focus，blur

表单事件，change，submit，input。

事件处理函数，有两种写法：

在methods中定义，然后直接引用

直接以行内的方式来写

（2）传参

事件函数需要传参，那就在执行函数的时候传入实际参数，对函数加（）。

3、事件对象和事件修饰符

（1）事件对象

事件对象就是一个对象，记录了发生事情时候的一些信息，就像飞机的黑匣子，比如鼠标的坐标、按下的键是 哪一个键。

事件对象是人家已经定义好的，我们只需要以相应的方式来获取就可以了。在Vue中，事件对象也是预定义好的，并且它的名字是固定的 --- $event。

（2）事件修饰符

1）prevent

prevent事件修饰符用于阻止默认的事件。

2）stop

stop修饰符用于阻止事件冒泡。

父元素(div)和子元素(button)同时绑定了事件，当点击子元素时，由于stop修饰符阻止了事件冒泡，所以弹窗只弹一次；如果去掉stop修饰符，当点击子元素时，弹窗会弹两次。

3)capture

capture修饰符将冒泡模式改成捕获模式。即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。就是谁有该事件修饰符，就先触发谁。

这样的话就会将冒泡模式改成捕获模式。点击按钮，就会先触发div的click事件然后再触发button的click事件，表现出来就是先弹出father，再弹出son。

4)once

once修饰符设置事件只会被触发一次。

4、按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。按键修饰符为需要监听的按键的keyCode。