vue系列：事件修饰符、按键修饰符与系统修饰符

最新推荐文章于 2024-02-23 18:04:20 发布

Laymanღ

最新推荐文章于 2024-02-23 18:04:20 发布

阅读量260

点赞数 2

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

本文链接：https://blog.csdn.net/TotoroChinchilla/article/details/124536616

版权

Vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

vue系列：事件修饰符、按键修饰符与系统修饰符

好记性不如烂笔头，学习过程中也要记笔记，方便日后的复习

一、什么是DOM事件流？

1、事件

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

2、事件处理程序（事件监听）

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

3、DOM 事件流

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

4、事件捕获（event capture）:

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

5、事件冒泡（event bubbing）

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

二、事件修饰符

1、内置事件对象$event

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

代码示例如下：

<body>
    <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 对象
                    //e.target.innerHTML可以打印出按钮上的文本
                    console.log(e.target.innerHTML)//e.target 就是拿到的那个按钮，这个地方拿到的是原生 dom 对象  
                }
            }
        })
</script>
</body>

2、原生JS方法阻止事件冒泡

在单击的方法中传入$event 事件对象，然后方法内部调用事件对象的 stopPropagation()方法。

代码示例如下：

<body>
	<div>
    <input type="button" value="点击"  @click="btnHandlerClick($event)" />
    </div>
<script>
       var vm=new Vue({
           el:"#app",
           data:{

           },
           methods: {
                divHandlerClick() {
                    alert('我是div的点击事件！')
                },
                btnHandlerClick(e) {
                    alert('我是button的点击事件')
                    e.stopPropagation();     
                }     
           },
       })
   </script>
 </body>

2、stop 阻止事件冒泡事件修饰符

话不多说，上案例

代码示例如下：

<body>
	<div>
    <input type="button" value="点击" @click.stop="btnHandlerClick" />
    </div>
<script>
       var vm=new Vue({
           el:"#app",
           data:{

           },
           methods: {
                divHandlerClick() {
                    alert('我是div的点击事件！')
                },
                btnHandlerClick() {
                    alert('我是button的点击事件')
                   // e.stopPropagation();     
                }     
           },
       })
   </script>
 </body>

3、prevent阻止默认事件修饰符

对于表单的提交事件，默认提交后会重新加载页面。我们要阻止默认重新加载页面，需要在 submit事件后加.prevent 关键字就可以了

 <div id="app">
        <form v-on:submit.prevent="tijiao">
            <input type="text" name="username" />
            <input type="submit" value="提交" />
        </form>
    </div>
   <script>
       var vm=new Vue({
           el:"#app",
           data:{
           },
           methods: {
            tijiao(){
                // alert("1111")
                console.log("已阻止了默认的重新加载页面")
                //e.preventDefault();
                
            }
           },

       })
   </script>

如果将stop和prevent串联，可以既阻止冒泡、又阻止默认行为
v-on:click.stop.prevent

4、capture：添加事件监听器时使用事件捕获模式

事件捕获模式与事件冒泡模式（由内向外）是一对相反的事件处理流程，当我们想要将页面元素的事件流改为事件捕获模式（由外向内）时，只需要在父级元素的事件上使用 capture 修饰符即可。

5、.self、.once 修饰符

（1） .self：只当在 event.target 是当前元素自身时触发处理函数，即不管单击还是双击还是鼠标移动等事件是在自身上，才会触发对应的函数。
（2）.once：事件只触发一次，只有第一次单击有用，后面再单击就没有用了。

三、按键修饰符

1、按键所对应的 keyCode

<body>
    <div id="app" class="divDefault">
        {{msg}}
       <input type="text"  v-on:keydown="keydown">
    </div>
   <script>
       var vm=new Vue({
           el:"#app",
           data:{
                msg:""
           },
           methods: {
            keydown(e){
                console.log(e.keyCode)
                if(e.keyCode==13)
                {
                //获取文本框中的值
                    this.msg=e.target.value
                    //清空文本框
                    e.target.value=""
                }
            }
               
           },

       })
   </script>
</body>

改进

<body>
    <div id="app" class="divDefault">
        {{msg}}
       <input type="text" v-on:keydown.enter = "keydown" >
    </div>
   <script>
       var vm=new Vue({
           el:"#app",
           data:{
                msg:""
           },
           methods: {
            keydown(e){
                console.log(e.keyCode)
               // if(e.keyCode==13)
               // {
                //获取文本框中的值
                    this.msg=e.target.value
                    //清空文本框
                    e.target.value=""
              //  }
            }
               
           },

       })
   </script>
</body>

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

2、自定义按键修饰符

有部分按键是没有别名的，所以我们可以自己定义按键修饰符的别名
例如：假设F2键没有别名，我要指定F2键的别名

<body>
    <div id="app" class="divDefault">
        <label>姓名：</label>
        <!-- keyup是指按下并释放-->
        <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>