vue---按键修饰符(.stop、.prevent、.capture、.self、.once)

文档中心

本文是我在学习vue的过程中记录学习的点点滴滴，仅仅为了学完之后巩固一下，日后忘记了也可以方便快速的复习。

按键 修饰符

前言
一、DOM 事件流相关概念
- 1、事件
- 2、事件处理程序
- 3、DOM 事件流
- 4、事件捕获（event capture）
- 5、事件冒泡（event bubbing）
二、按键修饰符
- 2.1、.stop 阻止事件冒泡事件修饰
- - 2.1.1、事件冒泡：
  - 2.1.2、【回顾 js】通过下面例子认识下内置事件对象$event
  - 2.1.3、原生 js 做法
  - 2.1.4、采用 Vue 的 stop 事件修饰符
- 2.2、.prevent：阻止默认事件修饰符
- - 2.2.1、阻止 a 标签默认事件
- 2.3、修饰符串联
- 2.4、.capture：添加事件监听器时使用事件捕获模式(颠倒冒泡顺序)
- 2.5、 .self修饰符
- 2.6、.once 修饰符(事件只触发一次)
三、按键修饰符
- 3.1、如何测试得知按键的 keyCode
- 3.2、vue 简单方式监听按键事件
- 3.3、自定义按键修饰符
- 3.4、系统修饰符
- 3.5、鼠标按钮修饰符

前言

今天主要学习的是vue中按键修饰符，，在实际开发中，不可避免的会使用到对于事件的操作，如何处理 DOM 事件流，成为必须要掌握的技能。不同于传统的前端开发，在 Vue 中提供了事件修饰符这一利器，可以便捷的处理 DOM 事件，本章，一起来学习如何使用事件修饰符来实现对于 DOM 事件流的操作等

一、DOM 事件流相关概念

有时，需要完成页面中的某些功能时，在需要实现功能的页面元素上使用 v-on 指令去监听 DOM 事件，在 html4 时代，IE 和Netscape 的开发团队提出了两个截然相反的事件流概念。这一差异，也使我们在写代码中需要考虑如何去处理 DOM 的事件细节。为了解决这一问题，vue 给我们提供了事件修饰符这一利器，它使我们的方法只有纯粹的数据逻辑，而不用去处理 DOM 事件细节。
一些涉及到概念：

1、事件

用户设定或者是浏览器自身执行的某种动作。例如
click(点击)、load(加载)、mouseover(鼠标悬停)、change(改变)等等。

2、事件处理程序

为了实现某个事件的功能而构建的函数方法，也可称为事件监听器。

3、DOM 事件流

描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。
在 DOM 事件流中存在着三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
（1）从文档的根节点流向目标对象 —> 事件捕获阶段
（2）在目标对象上被触发 —> 处于目标阶段
（3）回溯到文档的根节点 —> 事件冒泡阶

4、事件捕获（event capture）

当鼠标点击或者触发 DOM 事件时，浏览器会从根节点开始由外到内进行事件传播。

<!DOCTYPE html><html><head><title>Event Capture Example</title></head><body><div id="myDiv">Click Me</div></body></html

单击

元素就会以下列顺序触发 click 事件（后面有例子）。
(1) document
(2)
(3)
(4)

5、事件冒泡（event bubbing）

当鼠标点击或者触发 DOM 事件时，浏览器会从触发事件的节点开始由内到外进行事件传播，即点击了子元素，则先触发子元素绑定的事件，逐步扩散到父元素绑定的事件。如果你单击了页面中的

元素，那么这个 click 事件会按
照如下顺序传播（后面有例子）：
(1)

(2)
(3)
(4) document
之前提到的 IE 和 Netscape 的开发团队提出了两个截然相反
的事件流概念，IE 采取的是事件冒泡流，而标准的浏览器的事件流则是事件捕获流。所以，为了兼容 IE 我们需要改变某些的写法。

二、按键修饰符

2.1、.stop 阻止事件冒泡事件修饰

2.1.1、事件冒泡：

<div id="app" class="divDefault"><div id="div1" @click="divHandlerClick"><input type="button" value="点击" @click="btnHandlerClick" /></div></div><script>var vm = new Vue({el: '#app', data: {}, methods: {divHandlerClick() {alert('我是 div 的点击事件！')},btnHandlerClick() {alert('我是 button 的点击事件')}}});</script>

上面分别创建了一个 button 的点击事件和外侧的 div 的点
击事件，根据事件的冒泡机制我们可以得知，当我们点击了按钮之后，会扩散到父元素，从而触发父元素的点击事件。也就是先会弹出’我是 button 的点击事件’的弹窗，然后弹出’我是 div 的点击事件！'的弹窗。

2.1.2、【回顾 js】通过下面例子认识下内置事件对象$event

print($event)中的形参$event是系统的内置对象，print(e) 中的e就是传的实参，e.target获取的时该事件的事件源（拥有这个事件的标签）

<div id="app"><button @click="print($event)">单击我</button></div><script>var vm = new Vue({el: "#app", data: {//存储数据地方flag: true},methods: {print(e) {console.log(this)//this 表示 vue 实例console.log(e)//打印出 event 对象console.log(e.target.innerHTML)//e.target 就是拿到的那个按钮，这个地方拿到的是原生 dom 对象}}})</script>

$event 对象包含事件的相关信息：比如事件源 target、事件类型 type、偏移量 offsetX 等

如何阻止事件冒泡呢?

2.1.3、原生 js 做法

如果我们不希望出现事件冒泡，单击的方法需要传入$event 事件对象，然后方法内部调用事件对象的 stopPropagation()方法。

在事件中设置内置事件对象$event：

<input type="button" value="点击" @click="btnHandlerClick($event)" />

处理单击按钮事件的方法改为如下：

btnHandlerClick(e) {alert('我是 button 的点击事件');e.stopPropagation()}

这时单击【点击】按钮只会弹出’我是 button的点击事件’的弹窗。

2.1.4、采用 Vue 的 stop 事件修饰符

如果我们不希望出现事件冒泡，则可以使用 Vue 内置的修饰符便捷的阻止事件冒泡的产生。因为我们是点击 button 后产生事件冒泡，我们只需要在 button 的点击事件上加上 stop 修饰符即可。

<input type="button" value="点击" @click.stop="btnHandlerClick" />

这时单击【点击】按钮也只会弹出’我是 button 的点击事件’的弹窗

2.2、.prevent：阻止默认事件修饰符

阻止默认事件就是指有些标签本身会存在事件，例如，a 标签的跳转，form 表单中 submit 按钮的提交事件等等，在某些时候我们只想执行我们自己设置的事件，这时，就需要阻止标签的默认事件的执行，原生的 js 也是方法中传入$event 事件对象，然后在方法内部使用事件对象 preventDefault 方法来实现，而在 Vue 中，我们只需要使用 prevent 关键字就可以了

2.2.1、阻止 a 标签默认事件

在下面的示例中，第一个链接添加了.prevent，第二个链接没有添加.prevent，为两个a 标签都添加了一个点击事件，由于第二个 a 标签本身具有默认的跳转事件，此时，当我们点击第二个链接后，最终还是会执行 a 标签的默认事件。也就是先打开弹框，然后跳转到百度网站。如果点击第一个 a 标签，因为加上了.prevent，所以它就只会打开弹框’我是 a 标签的点击事件’并不会跳转到百度网站。

<body>    <div id="app"><a href="http://www.baidu.com" @click.prevent="aHandlerClcik">链接跳转</a> <a href="http://www.baidu.com" @click="aHandlerClcik">链接跳转</a>    </div>   <script>var vm=new Vue({    el:"#app",    data:{    },    methods: {     aHandlerClcik(){  alert("我是a标签的单击事件")     }    },})   </script></body>

2.3、修饰符串联

</a>

即是既阻止冒泡、又阻止默认行为。

2.4、.capture：添加事件监听器时使用事件捕获模式(颠倒冒泡顺序)

在上面的学习中我们了解到，事件捕获模式与事件冒泡模式是一对相反的事件处理流程，当我们想要将页面元素的事件流改为事件捕获模式时，只需要在父级元素的事件上使用 capture 修饰符即可，还是上面的例子事件流冒泡的代码，当我们在 div 绑定的点击事件上使用 capture 修饰符后，我们点击按钮首先触发的就是最外侧的div 的事件。

<div id="app" class="divDefault"><div id="div1" @click.capture="divHandlerClick"><input type="button" value="点击" @click="btnHandlerClick" /></div></div><script>var vm = new Vue({el: '#app', data: {}, methods: {divHandlerClick() {alert('我是 div 的点击事件！')},btnHandlerClick() {alert('我是 button 的点击事件');}}});</script>

关键是在父级元素的单击事件中加了.capture，这时单击按钮时是先弹出’我是 div 的点击事件！‘，然后弹出’我是 button 的点击事件’，也就与原来的事件冒泡方式反过来了。

2.5、 .self修饰符

只当在 event.target 是当前元素自身时触发处理函数

在上面的例子事件冒泡中，我们为 div 绑定了一个点击事件（外面那个事件），而我们的本意可能是只有当我们点击 div 后触发这个事件，而实际情况不论是事件冒泡还是事件捕获都会触发这个事件，这与我们的本意是不符的。在 Vue 中，我们就可以使用 self 修饰符去修饰事件，让这个事件只在我们想要触发时触发。

<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <script src="js/vue.js"></script>    <style>.divDefault{    width: 200px;    height: 100px;    background-color: red;}#div1{    height: 50px;    background-color: blue;}    </style></head><body>    <div id="app" class="divDefault"> <div id="div1" @click.self="divHandlerClick">div1     <input type="button" value="点击" @click.once="btnHandlerClick" />     <!-- ceshi --> </div>    </div>   <script>var vm=new Vue({    el:"#app",    data:{    },    methods: {  divHandlerClick() {      alert('我是div的点击事件！')  },  btnHandlerClick() {      alert('我是button的点击事件')      // e.stopPropagation(); },  doThat(){      alert('hello')  }     },})   </script></body>

只有单击 div1 本身时才会触发 divHandlerClick 事件，单击到div1 内部的 Button 时不会触发 divHandlerClick，只会触发 Button绑定的事件。与在 Button 单击事件用 stop 阻止冒泡效果一样。但实现机理不一样。实际上通过.self 修饰符的单击 button 按钮它会去冒泡传播下事件，但是传播到 div1 时，发现传播过来的事件不是 div1本身触发的，所以不会触发 div1 的单击事件。而通过.stop 修饰Button 的单击事件，直接就阻止了事件的传播

2.6、.once 修饰符(事件只触发一次)

如果想对绑定的事件只在第一次的时候触发，这时我们就可以使用 once 修饰符去修饰绑定的事件。例如在下面的代码中，只有第一次点击时才会触发绑定的事件，之后点击都不会触发

<input type="button" value="点击" @click.once="btnHandlerClick" />

三、按键修饰符

在某些实际场景中，我们也需要去设定各种按键事件去优化页面的交互，接下来我们来学习下在 Vue 中如何去监听键盘事件。

需求：用户输入账号密码后点击 Enter 键进行登录

在传统的前端开发中，当我们碰到这种类似的需求时，需要知道按键所对应的 keyCode（比如，回车键 KeyCode 为 13），然后通过判断 keyCode 得知用户是按下了哪个按键，继而执行后续的操作。而在 Vue 中，给我们提供了一种便利的方式去实现监听我们的按键事件。在监听键盘事件时，我们经常需要查找常见的按键所对应的keyCode，而 Vue 为最常用的按键提供了别名（不需要我们判断keyCode、不需要我们记住 keyCode 值）。

3.1、如何测试得知按键的 keyCode

<body>    <div id="app" class="divDefault"><input type="text" v-model="msg" v-on:keydown="keydown">    </div>   <script>var vm=new Vue({    el:"#app",    data:{  msg:"输入一个字符，输出对应keyCode"    },    methods: {     keydown(e){  console.log(e.keyCode)  if(e.keyCode==13)  { }     }     },})   </script></body>

结果：
在这里插入图片描述

测试得知：
0-9 的 keyCode 是 48-57。此外方向键左上右下（顺时针）分别是 37-40，回车为 13，空格为 32，F2 键为 113

需求：在文本框中不断输入字符，当输入回车时显示前面已输入的字符，同时清空文本框

<div id="app"><div>在文本框中不断输入字符，当输入回车时显示前面已输入的字符，同时清空文本框</div>{{msg}}<input type="text" v-on:keydown="keydown"></input></div><script>var vm=new Vue({el:"#app", data:{msg:""},methods:{keydown:function(e){console.log(e.keyCode)if(e.keyCode==13){this.msg=e.target.value;//获取文本框中的值e.target.value="";}}}})</script>

结果： vue---按键修饰符(.stop、.prevent、.capture、.self、.once)

3.2、vue 简单方式监听按键事件

在 Vue 中，给我们提供了一种便利的方式去实现监听我们的按键事件。在监听键盘事件时，我们经常需要查找常见的按键所对应的keyCode，而 Vue 为最常用的按键提供了别名

<body>    <div id="app" class="divDefault"> <label>姓名：</label> <input id="name" type="text" v-model="name" @keyup.a="pressF2">    </div>   <script>    //    Vue.config.keyCodes.f2=113var vm = new Vue({     el: '#app',     data: {  name: ''     },     methods: {  pressF2() {      console.log("name:"+this.name +"，是通过 F2 按键获得")      console.log(`name:${this.name},是通过 F2 按键获得`)  }     } })   </script></body>

为方便使用，Vue 提供了绝大多数常用的按键码的别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

有一些按键 (如 esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选

3.3、自定义按键修饰符

当然 Vue 没有把所有的按键都定义好别名。但是，Vue 给我们提供了一种通过定义全局 config.keyCodes 来自定义按键修饰符的别名的方式。例如，在上面的例子中，我们是通过 Enter 按键获取到输入的文本框的值，现在，我们的需求变了，需要我们通过 F2 按键来获得文本框的值，这时我们就可以通过自定义按键修饰符来实现操作。

<div id="app"><label>姓名：</label><input id="name" type="text" v-model="name" @keyup.F2="pressF2"></div><script>//通过 keyCode 自定义按键修饰符Vue.config.keyCodes.f2 = 113var vm = new Vue({el: '#app', data: {name: '' },methods: {pressF2() {console.log("name:"+this.name +"，是通过 F2 按键获得");}}})</script>

结果：
在这里插入图片描述

说明：
（1）实际上 F2 等 FX 及 a-z 字母的别名都有了，无需自定义直接使用就可以，也即是说删除Vue.config.keyCodes.f2 = 113 也可以的。
（2） console.log(“name:”+this.name +“，是通过 F2 按键获得”);可以用下面的代替：
console.log(`name:${this.name} ，是通过 F2 按键获得`);
上面写法更简洁，注意两端不是双引号，也不是单引号，而是反单引号``。

3.4、系统修饰符

在 Vue 的 2.1.0 以后版本中，开发者又为我们提供了系统修饰符来实现仅在同时按下相应按键（键盘按键、鼠标按键）时才触发键盘或鼠标事件的监听器事件。

键盘按键修饰符:.ctrl.alt.shift.meta注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。

<div id="app"><label>姓名：</label><input id="name" type="text" v-model="name" @keyup.ctrl="log"></div><script>var vm = new Vue({el: '#app', data: {name: '' },methods: {log() {console.log(`name:${this.name}`);}}})</script>

当我们点 ctrl 按键时，控制台不会输出任何信息，即自定义的方法其实并没有执行。因为系统修饰符一般还跟另外一个系统修饰符一起使用才有效，此时可以按下 ctrl 键加另外一个系统修饰符，如ctrl+alt 或 ctrl+shift 可以生效，不过按 ctrl+a,ctrl+c 等也会生效，感觉有点乱。于是我们一般会去指定系统修饰符与另外一个字母键进行组合。即上面的.ctrl代码可以改为.ctrl.67 或者.ctrl.c，即是按ctrl+c，c 的 keycode 为 67。如果改为.alt.67,即表示 alt+c，这样话按其他的就无效。

总结：系统修饰符主要是以一种组合按键的形式使用。
又如配合单击事件：

Do something

<!-- 单击 Do something 的同时按下了 ctrl 键才能触发方法
doSomething–>

3.5、鼠标按钮修饰符

在 Vue 的 2.2.0 以后版本中，开发者又为我们提供了鼠标按钮修饰符去触发鼠标事件监听器。例如下面的代码所示，当我们鼠标右键点击我们的按钮时才会触发我们的自定义 log 事件。几个鼠标按钮修饰符：.left .right .middle

<body>    <div id="app" class="divDefault"><input type="text" v-model="name"><button @click.right="log">log</button>    </div>   <script>    //    Vue.config.keyCodes.f2=113var vm = new Vue({     el: '#app',     data: {  name: ''     },     methods: {  log() {  console.log(`name:${this.name}`)  },     } })   </script></body>

结果：
在这里插入图片描述
上述只有鼠标右击log按钮才会触发事件
此时会发现鼠标右击的默认事件出现了，可以通过.prevent 去阻止

<button @click.right.prevent="log">log</button>

结果：
在这里插入图片描述
此时则不会触发鼠标右击的默认事件。

vue---按键修饰符(.stop、.prevent、.capture、.self、.once) 创作打卡挑战赛赢取流量/现金/CSDN周边激励大奖