Vue事件

一、事件的基本使用

（一）触发事件不传参

事件的基本语法：

v-on : 事件 = "事件触发函数"   或   @事件 = "事件触发函数"

事件 

 我们以click时间为例：点击button按钮，弹窗“你好呀！”

（二）触发事件传参

我们在触发事件时想要传递参数可以直接在时间触发函数后面传递参数：

 

传入参数$event相当window对象中的e对象，包含操作对象的信息。 

二、事件修饰符

（一）prevent阻止默认事件

加修饰符前：点击a标签先执行showInfo函数，再跳转至主页。

加修饰符后：点击a标签执行showInfo函数，页面不跳转。 

（二）stop阻止事件冒泡

加修饰符前：点击div2执行showInfo函数，冒泡到div1身上再次执行showInfo函数。

加修饰符后：点击div2执行showInfo函数，不会冒泡到div1身上。

（三）once事件只触发一次

加修饰符前：点击一次button按钮触发一次showInfo函数。

加修饰符后：第一次点击button按钮触发showInfo函数，之后再点不会触发showInfo函数。

（四）capture使用事件捕获模式 

加修饰符前：点击div2先执行showInfo(2)函数，再执行showInfo(1)函数。

加修饰符后：点击div2先执行showInfo(1)函数，再执行showInfo(2)函数。

（五）self只有event.target是当前对象才触发是事件

加修饰符之前：点击div2先执行showInfo(2)函数，再执行showInfo(1)函数。

加修饰符之后：点击div2执行showInfo(2)函数，但是不执行showInfo(1)函数；只有点击div1时才执行showInfo(1)函数。

（六）passive立即执行事件默认行为

加修饰符前：触发滚轮只有等demo函数中的代码执行完成后滚动条才会向下滚动。

加修饰符后：触发滚轮后滚动条直接向下滑动，无需demo函数执行完毕。

三、键盘事件

（一）常见的键盘事件

键盘事件语法格式如下：

@keydown.按键 = "事件回调函数"   或

@keyup.按键 = "事件回调函数"

 Vue中常用的键盘事件别名：

回车 => enter

删除 => delete（“删除”和“退格”键）

退出 => esc

空格 => space

换行 => tab （特殊，必须配合keydown使用）

上 => up

下 => down

左 => left

右 => right

如果想要使用除常用键盘事件别名以外的按键，可以使用e.key来进行配置

 （二）系统修饰键的特殊用法

系统修饰按键：ctrl 、alt 、shift 、meta

1. 配合keyup使用：按下修饰键的同时，再按下其他按键，随后释放其他修饰键，事件才被触发。

2. 配合keydown使用：正常触发事件。

四、补充

（一）事件修饰符连用

如下代码中，点击a标签即阻止事件默认行为，又阻止事件冒泡。

 （二）按下一个键+另一个键触发事件

如下代码中，按下Ctrl再按下y才触发showInfo函数