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

最新推荐文章于 2024-06-26 08:53:16 发布

小小福仔

最新推荐文章于 2024-06-26 08:53:16 发布

阅读量1k

点赞数 1

分类专栏： Vue 文章标签： vue.js

By 福仔

本文链接：https://blog.csdn.net/qq_46152664/article/details/124423750

版权

Vue 专栏收录该内容

28 篇文章 4 订阅

订阅专栏

本文深入探讨了Vue中的事件修饰符，包括.stop用于阻止事件冒泡，.prevent阻止默认事件，.capture改变事件捕获顺序，.self确保事件仅在目标元素上触发，以及.once修饰符使得事件只触发一次。此外，还详细讲解了按键修饰符的使用，如监听键盘事件，自定义按键别名，以及系统修饰符和鼠标按钮修饰符的应用，展示了Vue如何简化DOM事件处理。

摘要由CSDN通过智能技术生成

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

前言

今天主要学习的是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

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

5、事件冒泡（event bubbing）

当鼠标点击或者触发 DOM 事件时，浏览器会从触发事件的节点开始由内到外进行事件传播，即点击了子元素，则先触发子元素绑定的事件，逐步扩散到父元素绑定的事件。如果你单击了页面中的 <div> 元素，那么这个 click 事件会按
照如下顺序传播（后面有例子）：
(1)<div>
(2)<body>
(3)<html>
(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 href=“http://www.baidu.com”v-on:click.stop.prevent="doThat"></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" />
            <!-- <a href="http://www.baidu.com" v-on:click.stop.prevent="doThat">ceshi</a> -->
        </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>

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

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=113
       var 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.F
2="pressF2">
</div>
<script>
//通过 keyCode 自定义按键修饰符
Vue.config.keyCodes.f2 = 113
var 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.c
trl="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，这样话按其他的就无效。

总结：系统修饰符主要是以一种组合按键的形式使用。
又如配合单击事件：
<div @click.ctrl=“doSomething”>Do something</div>
<!-- 单击 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=113
       var 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>

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