vue2知识点：事件处理

刘大猫.

已于 2024-07-01 11:35:17 修改

阅读量2.2k

点赞数

分类专栏： Vue2专栏文章标签：前端 vue.js vue2 事件处理

于 2022-05-20 16:22:15 首次发布

本文链接：https://blog.csdn.net/a924382407/article/details/124885355

版权

Vue2专栏专栏收录该内容

109 篇文章 45 订阅

订阅专栏

在这里插入图片描述

文章目录

一、事件的基本使用
二、$event 对象
三、事件的修饰符
四、键盘事件(键值修饰符)
本人其他相关文章链接

一、事件的基本使用

注意点1：定义事件函数时，普通函数this指代vue对象，而箭头函数中this指代Window对象。
注意点2：定义事件没参数小括号()可省略，但是用在插值表达式使用一个函数返回值就必须带小括号()，比如全名：{{fullName()}}。
注意点3：不被vue所管理的函数那么请使用箭头函数。
在这里插入图片描述

代码：

<button v-on:click="showInfo1">点我提示信息1(不传参)</button>
<button @click="showInfo2($event, 66)">点我提示信息2(不传参)</button>

var vm = new Vue({
        el: "#app",
        data: {},
        methods:{
            showInfo1(event) {
                console.log(event);
            },
            showInfo2(event, number) {
                console.log(event);  //指代事件对象
                console.log(number);
                console.log(this);  //在箭头函数中，this 指向全局上下文，而不是 Vue 实例；普通方法指代vue对象
            }
        }
    })

二、$event 对象

在事件处理函数中访问 DOM 原生事件 event 对象，可以使用特殊变量$event 对象传入。

三、事件的修饰符

在这里插入图片描述

事件修饰符举例说明：

1）prevent

默认<a>标签会跳转，想实现点击不跳转就设置@click.prevent=”事件函数”或者
<a href=“javascript:void(0);”

2）阻止事件冒泡

捕获阶段：指由外往内冒泡阶段：指由内到外
举例：2个div1，div2，都有点击事件，如果不设置事件修饰符stop，那么点击div2触发事件完成之后，还会触发div1事件，而设置stop修饰符后，不会触发冒泡阶段。

在这里插入图片描述

3）once

事件只触发一次（常用），即无论点击多少次按钮，按钮只触发一次。

4）capture

设置使用事件的捕获模式，不设置使用冒泡模式（由内向外触发事件函数）；

使用事件的捕获模式：不设置.capture，先执行showMsg(2)，再执行showMsg(1)，设置之后先执行showMsg(1)，再执行showMsg(2)

<div class="box1" @click.capture="showMsg(1)">
        div1
        <div class="box2" @click="showMsg(2)">
            div2
        </div>
</div>

showInfo(e){
   console.log(e.target)
}

5）self

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

举例：
div和button都设置事件函数，如果div标签不设置.self，那么点击button按钮会调用2次函数，且输出event.target为：<button>点我提示信息，如果div标签设置了.self那么只有点击div才会触发事件且输出event.target为：<div class=“demo1”><button>点我提示信息</button></div>，而只点击button只会触发button的事件且输出event.target为：<button>点我提示信息</button>。

<div class="demo1" @click.self="showInfo">
    <button @click="showInfo">点我提示信息</button>
</div>

6）passive

事件的默认行为立即执行，无需等待事件回调执行完毕

举例：
定一个事件会计算10W次，如果不设置.passive，那么会等事件全部结束后，滚轮才会向下移动一个位置，而设置了.passive，那么滚轮会先移动而不会去等待事件执行是否结束。
在这里插入图片描述
事件的默认行为立即执行，无需等待事件回调执行完毕

<ul @wheel.passive="demo" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
</ul>

demo(){
   for (let i = 0; i < 100000; i++) {
          console.log('#')
   }
   console.log('累坏了')
}