Vue 的事件修饰符and按键修饰符

1、事件修饰符概览

修饰符	说明
.prevent	阻止默认事件
.stop	阻止冒泡
.once	事件只触发一次
.capture	添加事件侦听器时使用事件捕获模式
.self	只有点击当前元素本身时才会触发回调
.passive	事件的默认行为立即执行，无需等待事件回调执行完毕(不常用)
.native	将vue组件转换为一个普通的HTML标签, 如果该修饰符用在普通html标签上是不起任何作用的

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 -->
<form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div><!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a><!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

1.prevent:阻止默认事件(常用)

①.prevent:阻止默认行为
--对于如<a href="www.baidu.com" @click.prevent="linkMethod">百度</a>自带事件的,添加prevent事件后,href跳转路径将不会触发

.prevent 用来阻止默认行为，我们可以通过a标签来演示，先来看看未阻止的情况。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body> <div id="app"><a href="http://www.baidu.com" @click='linkclick'>百度一下</a></div><script>var vm = new Vue({el:"#app",data: {},methods: {linkclick(){console.log('阻止默认行为')}}})</script>
</body>
</html>

点击“百度一下”，我们可以看到先触发了点击事件，然后页面跳转了

这时我们可以通过 .prevent 修饰符来阻止a标签默认的跳转事件。

<a href="http://www.baidu.com" @click.prevent='linkclick'>百度一下</a>

2. stop:阻止事件冒泡(常用)

②.stop:阻止冒泡
--对于嵌套的两级,如果子父级元素都存在click事件,点击子级元素会触发父级元素的事件;如果子级元素设置@click.stop的话就不会触发父级的click事件

.stop用来防止冒泡，我们先来看看冒泡的场景。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body> <div id="app"><div @click="divHandler"><button @click="btnHandler">点击</button></div></div><script>var vm = new Vue({el:"#app",data: {},methods: {divHandler() {console.log('触发了div')},btnHandler() {console.log('触发了button')}}})</script>
</body>
</html>

点击按钮时，可以看到不光按钮的点击事件触发了，而且父容器div的点击事件也触发了，

这时我们就可以使用 .stop 修饰符来阻止这个冒泡。

<div @click="divHandler"><button @click.stop="btnHandler">点击</button>
</div>

3. once:事件只触发一次(常用)

③.once: 事件只触发一次(常用表单提交)

.once 表示只触发一次事件处理函数。先来看看没有.once的情况。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body> <div id="app"><button @click="btnHandler">点击</button></div><script>var vm = new Vue({el:"#app",data: {},methods: {btnHandler() {console.log('触发了button')}}})</script>
</body>
</html>

可以看到每次点击按钮时都会触发一次事件处理函数，

现在我们给按钮的点击事件添加 .once 修饰符，可以看到事件处理函数只触发了一次。

<button @click.once="btnHandler">点击</button>

4.captrue:使用事件的捕捉模式(不常用)

④.capture: 对于冒泡事件,且存在多个冒泡事件时,存在该修饰符的会优先执行,如果有多个,则从外到内执行

.capture 实现捕获触发事件的机制。即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。（若有多个该修饰符，则由外而内触发）

以上面的冒泡场景为例，点击按钮时先触发的是按钮的点击事件，然后触发的div的点击事件，现在我们给div的点击事件绑定 .capture 修饰器，可以看到先触发的是div事件。

<div @click.capture="divHandler"><button @click="btnHandler">点击</button>
</div>

5.self:只有event.target是当前操作的元素时才触发事件(不常用)

⑤.self:仅绑定元素自身触发,防止事件冒泡
--对于嵌套的两级,如果子父级元素都存在click事件,点击子级元素会触发父级元素的事件;如果父级元素设置@click.self的话就不会被子级元素的click事件影响

.self 实现只有点击当前元素时候，才会触发事件处理函数。

以上面的冒泡场景为例，点击按钮时，按钮和div的点击事件都会被触发。现在我们给div的点击事件绑定 .self 修饰器，（为了便于观察给div加上背景颜色）。可以看到点击按钮时只触发了按钮的点击事件，只有点击div元素时才会触发div的点击事件。

<div @click.self="divHandler" style="background: red;"><button @click="btnHandler">点击</button>
</div>

6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕(不常用)

⑥.passive: 滚动事件的默认行为 (即滚动行为) 将会立即触发,不能和.prevent 一起使用,
浏览器内核线程在每个事件执行时查询prevent,造成卡顿,使用passive将会跳过内核线程查询,进而提升流畅度

7.native: 将vue组件转换为一个普通的HTML标签,如果该修饰符用在普通html标签上是不起任何作用的

2、键盘事件的修饰符

在我们的项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符：

<input v-on:keyup.13="submit">

对于一些常用键，还提供了按键别名：

<input @keyup.enter="submit">      <!-- 缩写形式 -->

Vue为我们提供了常用的键盘事件，具体如下：

修饰符	键盘事件
.enter	按下回车键后触发
.delete	按下backspace或者delete键触发
.esc	按下esc键后触发
.space	按下空格键后触发
.up	按下上键后触发
.down	按下下键后触发
.left	按下左键后触发
.right	按下右键后触发
.tab	按下tab键触发，该按键配合keydown事件使用，否则会切走焦点

修饰键：

.ctrl .alt .shift .meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。

<!-- 按下Alt + 释放C触发 -->
<input @keyup.alt.67="clear"><!-- 按下Alt + 释放任意键触发 -->
<input @keyup.alt="other"><!-- 按下Ctrl + enter时触发 -->
<input @keydown.ctrl.13="submit">

示例：按下backspace或者delete键时输出输入框中的内容

    <div id="app"><input type="text" @keyup.delete="demo"></div><script>var vm = new Vue({el: "#app",methods: {demo(e) {console.log(e.target.value);}}})</script>

但是如果我们想为除了上面的键之外的键绑定事件，这时就可以使用按键原始的key值（注意不是keyCode）去绑定事件。键的key值可以通过e.key来获取到，比如说获取q键的key值，代码如下：

    <div id="app"><input type="text" @keyup="getQ"></div><script>var vm = new Vue({el: "#app",methods: {getQ(e) {console.log(e.key); // 输出key值console.log(e.keyCode); // 输出keyCode}}})</script>

可以看到q的key值是q，keyCode是81，我们使用q可以为该键绑定事件，代码如下：

    <div id="app"><input type="text" @keyup.q="qClick"></div><script>var vm = new Vue({el: "#app",methods: {qClick() {console.log("按下了q键");}}})</script>

除了以上两种方式外，还有两种方式可以为键盘绑定事件：
（1）使用keyCode绑定事件，例如回车键的keyCode为13，按下回车键输出输入框中数字，不过该方式并不推荐，因为不同的键盘keyCode可能不同，示例代码如下：

    <div id="app"><input type="text" @keydown.13="demo"></div><script>var vm = new Vue({el: "#app",methods: {demo(e) {console.log(e.target.value);}}})</script>

（2）使用定制按键别名的方式绑定事件，语法如下：

Vue.config.keyCodes.自定义键名 = 键码;

为回车键绑定事件，示例代码如下：

    <div id="app"><input type="text" @keyup.huiche="demo"></div><script>Vue.config.keyCodes.huiche = 13; // 绑定回车事件var vm = new Vue({el: "#app",methods: {demo(e) {console.log(e.target.value);}}})</script>

注意：

对于大写锁定键来说，它的key值是CapsLock，因此在为它绑定事件时，必须将组成它的两个单词小写，并且使用“-”将他们连接，也就是说，它使用caps-lock来绑定事件
ctrl、alt、shift、meta键是系统修饰键，如果为它们绑定keyup事件不会立即起作用，它们起作用的方式为：按下系统修饰键——>按下其他键——>释放其他键，这样事件才会被触发

3、 element的修饰符 (面试回答加分)

<!-- 对于elementUI的input，我们需要在后面加上.native, 因为elementUI对input进行了封装，原生的事件不起作用。 --><input v-model="form.name" placeholder="昵称" @keyup.enter="submit"><el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>