Vue：事件

---

事件是前端中非常重要的一个功能，Vue自然也提供了对应的功能完成事件，通过v-on指令，可以完成事件的绑定。

语法：

<标签 v-on:事件="回调函数(参数)">

示例：

<button v-on:click="func(111, 222)">按钮</button>

以上代码，完成了一个按钮的点击事件的监听，click表示点击事件，回调函数为func，传入的参数为111和222。

那么现在自然要去定义一个回调函数，回调函数定义在Vue实例的methods属性下：

new Vue({methods:{func(a, b){console.log(a)console.log(b)	}}
})

点击按钮后，就会把111 222分别传给a b。

这里还有两个简写形式：

1. 如果回调函数不需要传参，可以不加括号直接调用
2. v-on:可以简写为@

<button @click="func">按钮</button>

这样就可以调用一个无参的func回调函数。

原生的DOM允许在回调函数中查看事件对象，Vue的回调函数也能做到。

• 调用一个无参的回调函数时，会默认给第一个参数传入事件对象。

示例：

<div id="root"><button @click="func">按钮</button>
</div><script type="text/javascript">const vm = new Vue({el:'#root',methods:{func(e){console.log(e)}}})
</script>

在按钮中，调用func时不传入任何参数，但是在回调函数中func有一个参数e。

输出这个参数e：

这个参数就是事件对象。

如果在调用函数时，函数有参数，那么此时要通过$event指定事件对象。

<button @click="func($event, 111, 222)">按钮</button>

以上事件绑定中，func函数传入了三个参数，其中第一个$event就表示这个参数传入事件对象。

func函数如下：

func(e, a, b){console.log(e)console.log(a)console.log(b)
}

输出结果：

此时第一个参数e接收到了事件对象，后了两个参数也正常传入了。

---

事件修饰符

事件修饰符是对一些常见的事件对象的操作做的封装，可以通过修饰符快速完成一部分功能。

语法：

<标签 v-on:事件.修饰符="回调函数(参数)">

修饰符以.追加在事件后面。

先看一个示例：

<a href="http://www.baidu.com" @click="showInfo">点我提示信息</a>

这是一个<a>标签，点击后触发showInfo回调函数。但是<a>标签是有默认行为的，也就是页面跳转，会跳转到百度。如果想要阻止这个行为，那么就需要阻止事件默认行为preventDefault。

示例：

methods:{showInfo(e){e.preventDefault()}
}

但是在Vue中，无需调用这个方法就可以实现阻止默认行为，只需加上prevent修饰符即可：

<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

这样就可以阻止默认行为，可以看出修饰符还是很方便的。

Vue中的事件修饰符：

1. prevent：阻止默认事件
2. stop：阻止事件冒泡
3. once：事件只触发一次
4. capture：在捕获阶段处理事件
5. self：只有event.target是当前操作的元素时才触发事件
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕

简单说一下self，这其实也是一种事件冒泡的的处理策略，当父元素收到来自子元素的事件冒泡，父元素就会触发相同的事件，但是此时可以通过检测事件对象event.target来判断是不是自己，从而决定是否要执行回调。

self简化了这个过程，只需要加入这个事件修饰符，那么收到来自子元素的冒泡，就不会触发事件。

---

键盘事件

在键盘触发的事件例如keyup、keydown中，需要通过event.keyCode来对比判断用户按下了哪个键，这其实挺麻烦的，Vue简化了这个语法。

语法：

<标签 v-on:事件.键位="回调函数(参数)">

在事件后，可以通过直接.键位的形式，来判断用户按下了哪个键，只有按下了指定的键位才会去触发回调函数，不需要再在回调函数内部判断了。

示例：

<input type="text" @keydown.enter="func">

以上输入框，绑定了一个keydown事件，只有用户按下enter键时才会触发回调函数func。

常见的键位如下：

值	键位	备注
enter	回车
delete	删除	同时捕获“删除”和“退格”键
esc	退出
space	空格
tab	换行	必须配合keydown去使用
up	上
down	下
left	左
right	右

除去以上提到的，Vue也可以通过事件.键位来指定。

其实键盘上的每个键位都有自己的名字，这可以通过event.key查询。

为一个输入框绑定一个事件，在事件内部输出event.key和event.KeyCcode：

console.log(e.key,e.keyCode)

按下几个按钮：

可以看到，每个键位都有名称，这些名称可以直接填入事件.键位中。

比如：

<input type="text" @keydown.Enter="func">
<input type="text" @keydown.Shitf="func">
<input type="text" @keydown.Control="func">
<input type="text" @keydown.Tab="func">

之前的enter、delete、esc等名称，都是对键原本名称的缩写或简写，并且全部转为了小写字母，方面代码快速编写。

但是有一个不一样，就是CapsLock，它是由两个单词组成的大驼峰命名，这种多个单词的键位，需要全部改成小写字母，并且用-连接多个单词：

<input type="text" @keydown.caps-lock="func">

除此之外，还可以直接用事件.KeyCode来绑定事件，比如：

<input type="text" @keydown.13="func">
<input type="text" @keydown.16="func">
<input type="text" @keydown.17="func">
<input type="text" @keydown.9="func">

这和之前那四个是同样的效果，但是这个特性已经不推荐了，未来有可能会被移除。

现在就有一个问题了，事件.修饰符与事件.键位，他们的位置重复了，如果都需要使用，应该怎么写？

这个很好解决，直接连着写就行：事件.修饰符.键位或者事件.键位.修饰符

例如：

按下Tab键的同时，阻止默认行为：

<input type="text" @keydown.tab.prevent="func">

也可以写为：

<input type="text" @keydown.prevent.tab="func">

他们两者也有略微的差别，.tab.prevent语法中，先检测是否是tab键，再阻止默认行为。而.prevent.tab中，先阻止默认行为，再检测是否是tab键。

除此之外，修饰符和修饰符之间也可以一起使用：

<input type="text" @keydown.prevent.stop="func">

以上事件绑定中，同时使用了prevent阻止默认行为和stop阻止冒泡，此时两者都会生效。同理，先阻止默认行为，后阻止冒泡。

---