VUE前端框架笔记02：事件的使用基础

于 2021-08-18 11:01:08 发布
阅读量239 收藏 2
点赞数
分类专栏： 前端知识学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m1m2m3mmm/article/details/119700929
版权
本文详细介绍了Vue.js中的事件处理，包括基本事件使用、事件修饰符的六个类型（如`prevent`、`stop`、`once`等）及其应用场景，以及键盘事件的处理，如按键别名和特殊按键的监听。通过示例代码展示了如何在实际开发中应用这些事件处理技巧。
摘要由CSDN通过智能技术生成

目录

1. 基本事件使用

2 事件修饰符

2.1 prevent 阻止默认事件

2.2 stop 阻止事件冒泡

2.3 once 事件只触发一次

2.4 capture 使用事件捕获模式

2.5 self 只有 event.target 是当前操作的元素时，才会触发事件

2.6 passive 立即执行默认事件

2.7 修饰符连用

2.8 完整代码

3 键盘事件

3.1 按键别名

3.2 五个特殊的按键

3.2.1 Tab键

3.2.2 系统修饰键：ctrl、alt、shift、win

3.3 不推荐的做法

3.3.1 使用按键编码指定按键

3.3.2 自定义按键别名

3.4 完整代码

1. 基本事件使用

在Vue前端框架笔记01：初识vue_m1m2m3mmm的博客-CSDN博客一文中，我们提到vue实例对象中的 el 键和data 键，而vue中的事件则是定义在methods键中。

  • 定义事件需要使用 v-on: 指令，它可以缩写为 @
  • 定义在data中的数据才会使用数据代理，methods中的事件函数不会进行数据代理
  • 事件默认参数 $event，在无参时可以不定义，在有参数时则必须定义
  • methods中的函数应该定义为普通函数，才能保证其this指向vm对象；如果写成箭头函数则指向的windows
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id='demo'>
        <p> {{name}}</p>
        <button v-on:click='showInfo1'>点我</button>
        <button @click='showInfo2($event, 66)'>点我哦</button>
        <p> 1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名;<br>
            2.事件的回调需要配置在methods对象中，最终会在vm 上;<br>
            3.methods中配置的函数，不要用箭头函数!否则this就不是vm了;<br>
            4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象;<br>
            5.@click="demo”和@click="demo($event)”效果一致，但后者可以传参;<br>
        </p>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#demo',
            data:{
                name:'SY'
            },
            methods:{
                showInfo1(event){
                    alert(event.target.innerText)
                    console.log(this) // 这里的 this 就是 vm 实例本身
                },
                showInfo2(event, number){
                    alert('传入的参数为：' + number)
                }
            }
        })
    </script>
</body>
</html>

2 事件修饰符

主要有6种，前三种比较常用：

  1. prevent 阻止默认事件
  2.  stop 阻止事件冒泡
  3. once 事件只能触发一次
  4.  capture 使用事件捕获模式
  5. self 只有 event.target 是当前操作的元素时，才会触发事件
  6.  passive 立即执行事件的默认行为

2.1 prevent 阻止默认事件

以 a 标签为例，它的默认事件为点击跳转链接，如果不想跳转链接，则为其添加事件修饰符

<!-- 阻止默认事件 -->
<a href='https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15' @click.prevent='showInfo1()'>点进入视频讲解</a>

2.2 stop 阻止事件冒泡

当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。

注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。

        <!-- 阻止事件冒泡 -->
        <div class='demo1' @click='showInfo1()'>
            <button @click.stop='showInfo1()'> 点我按钮 </button>
        </div>

2.3 once 事件只触发一次

只会在第一次点击时，触发事件

        <!-- 事件只能触发一次 -->
        <button @click.once='showInfo1()'> 我只能点一次 </button>

2.4 capture 使用事件捕获模式

事件捕获是由Netscape Communicator团队提出来的，是先由最上一级的节点先接收事件，然后向下传播到具体的节点。

这个正好与事件冒泡的顺序相反

        <!-- 使用事件捕获模式 -->
        <!-- 先事件捕获，再事件冒泡；而事件的处理是在事件冒泡阶段 -->
        <!-- 点div2时，先显示2，在显示1；如果使用capture，先显示1再显示2 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
            div2
            </div>
        </div>

2.5 self 只有 event.target 是当前操作的元素时，才会触发事件

self 也有阻止事件冒泡的功能，在下面的例子中：

按钮被点击，只会触发自己的事件，而不会触发div的事件，因为当前event.target的元素是按钮

        <!--  只有 event.target 是当前操作的元素时，才会触发事件-->
        <div class='demo1' @click.self='showInfo1()'>
            <button @click.stop='showInfo1()'> 点击当前元素才能触发 </button>
        </div>

2.6 passive 立即执行默认事件

如下代码中：

  • 若滚轮滚动，会触发默认事件：滚动条滚动 和 demo函数定义的操作
  • 使用passive修饰符，滚动条立马滚动，然后执行demo回调函数
  • 不使用passive修饰符，先执行demo回调函数，再滚动滚动条
  • scroll是滚动条的滚动，它可以由引起滚动条滚动的所有行为触发，如鼠标滚轮和键盘下键
  • wheel单纯的指的是鼠标滚轮的滚动
        <!-- 事件的默认行为会立即执行，无需等待事件的回调执行 -->
        <!-- 在移动端或平板中，使用的多一些 -->
        <!-- scroll：滚动条的滚动，键盘的👇也会触动该时间 -->
        <!-- wheel：滚轮滚动  -->
        <ul @wheel.passive='demo' class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

2.7 修饰符连用

如下代码中：

  • 先用使用 prevent 阻止默认事件
  • 再使用 stop 阻止冒泡

        <div class='demo1' @click='showInfo1()'>
           <!-- 阻止默认事件,然后阻止冒泡 -->
<a href='https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15' @click.prevent.stop='showInfo1()'>点进入视频讲解</a
        </div>

如下代码，与上面的代码功能相同，但是先阻止冒泡，再阻止默认事件

<div class='demo1' @click='showInfo1()'>
           <!-- 阻止默认事件,然后阻止冒泡 -->
<a href='https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15' @click.stop.prevent='showInfo1()'>点进入视频讲解</a
        </div>

2.8 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>Document</title>
    <style>
        *{margin-top: 20px;}
        .demo1{height: 50px; background-color: blue;}
        .box1{padding: 5px; background-color: blueviolet;}
        .box2{padding: 5px; background-color: burlywood;}
        .list{width: 200px; height: 200px; background-color: chartreuse; overflow: auto;}
        li{height: 100px;}
    </style>
</head>
<body>
    <div id='demo'>
        <p> 
            1. prevent 阻止默认事件<br>
            2. stop 阻止事件冒泡<br>
            3. once 事件只能触发一次<br>
            4. capture 使用事件捕获模式使用事件捕获模式
            5. self 只有 event.target 是当前操作的元素时，才会触发事件
            6. passive 立即执行事件的默认行为
        
        </p>
        <!-- 阻止默认事件 -->
        <a href='https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15' @click.prevent='showInfo1()'>点进入视频讲解</a>
        <!-- 阻止事件冒泡 -->
        <div class='demo1' @click='showInfo1()'>
            <button @click.stop='showInfo1()'> 点我按钮 </button>
        </div>
        <!-- 事件只能触发一次 -->
        <button @click.once='showInfo1()'> 我只能点一次 </button>
        <!-- 使用事件捕获模式 -->
        <!-- 先事件捕获，再事件冒泡；而事件的处理是在事件冒泡阶段 -->
        <!-- 点div2时，先显示2，在显示1；如果使用capture，先显示1再显示2 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
            div2
            </div>
        </div>
        <!--  只有 event.target 是当前操作的元素时，才会触发事件-->
        <div class='demo1' @click.self='showInfo1()'>
            <button @click.stop='showInfo1()'> 点击当前元素才能触发 </button>
        </div>
        <!-- 事件的默认行为会立即执行，无需等待事件的回调执行 -->
        <!-- 在移动端或平板中，使用的多一些 -->
        <!-- scroll：滚动条的滚动，键盘的👇也会触动该时间 -->
        <!-- wheel：滚轮滚动  -->
        <ul @wheel.passive='demo' class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <p> 
        </p>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#demo',
            data:{
                name:'SY'
            },
            methods:{
                showInfo1(event){
                    alert('按钮被点击了')
                },
                showMsg(){
                    console.log(msg)
                },
                demo(){
                    for (let i = 0; i < 1000; i++)
                    {
                        console.log('#')
                    }
                    console.log('累坏了')
                }
            }
        })
    </script>
</body>
</html>

3 键盘事件

3.1 按键别名

在键盘事件后，添加 .enter别名，就默认表示按下了Enter键。

<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">

Vue中常用的别名：

  • 回车，enter; 
  • 删除或退格，delete; 
  • 退出，esc; 
  • 空格，space; 
  • 换行，tab; 
  • 上下左右，up/down/left/right

键盘的每个按钮，都有名字和编号；因此，vue未提供的别名，可以使用按键原始的名字去拿;但是要注意转为kebab。如切换大小写按键CapsLock要写成 caps-lock。

<input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo">

并不是所有的按键都可以绑定事件，如调整键盘背光的按键。

3.2 五个特殊的按键

3.2.1 Tab键

Tab键有将光标从当前目标切换到其他目标的功能，因此，应该绑定keydown事件，不能绑定keyup事件，因为tab按下的时候，焦点已经切走了。

3.2.2 系统修饰键：ctrl、alt、shift、win

如果配合 keyup, 需按下 修饰键，再按下其他键，再释放其他键，才会触发事件.

如下代码中，只有点击 Ctrl + y 时，才能触发键盘事件

<input type="text" placeholder="按下回车提示输入" @keydown.ctrl.y="showInfo">

如果配合 keydown 使用，则会正常触发事件

<input type="text" placeholder="按下回车提示输入" @keydown.meta="showInfo">

3.3 不推荐的做法

3.3.1 使用按键编码指定按键

<input type="text" placeholder="按下回车提示输入" @keydown.13="showInfo">

3.3.2 自定义按键别名

Vue.config.keyCodes.huiche = 13 // 自己定义了一个别名按键，不推荐

3.4 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>Document</title>
    
</head>
<body>
    <div id='demo'>
        <p> @keydown 按键按下触发事件，@keyup 按键抬起才触发事件</p>
        <p> Vue中常用的别名：回车，enter; 删除或退格，delete; 退出，esc; 空格，space; 换行，tab; 上下左右，up/down/left/right </p>
        <p> 键盘的每个按钮，都有名字和编号；因此，vue未提供的别名，可以使用按键原始的名字去拿;但是要注意转为kebab，如切换大小写按键CapsLock要写成 caps-lock</p>
        <p> Tab键有将光标从当前目标切换到其他目标的功能，因此，应该绑定keydown事件，不能绑定keyup事件，因为tab按下的时候，焦点已经切走了。</p>
        <p> 系统修饰键：ctrl、alt、shift、win </p>
        <p> 如果配合 keyup, 需按下 修饰键，再按下其他键，再释放其他键，才会触发事件 </p>
        <p> 如果配合 keydown 使用，则会正常触发事件 </p>
        <p> 可以通过 按键编码 去指定按键，如 @keyup.13 表示enter键，目前不推荐 </p>
        <p> 自定义别名</p>
        <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
    </div>
    <script type="text/javascript">
    Vue.config.keyCodes.huiche = 13 // 自己定义了一个别名按键，不推荐
        const vm = new Vue({
            el: '#demo',
            data:{
                name:'SY'
            },
            methods:{
                showInfo(e){
                    // if (e.keyCode != 13) return
                    console.log(e.target.value) // 拿到控件输入的值，打印在控制台
                    console.log(e.key, e.keyCode) //打印按键的名字, 按键编码
                }
            }
            
        })
    </script>
</body>
</html>

小薛引路
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小薛引路

喜欢的读者，可以打赏鼓励一下

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值