vue3事件处理

一、事件监听：

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。

语法结构，v-on=" { 事件名：回调函数 | 表达式，对象，数组}

注意：vue2语法中，取值是对象形式时，v-on 不支持 @缩写关键字

1.v-on="回调函数"形式

注意：取值的回调函数可以加()，也可以不加，需要传参时，加小括号

<input type="button" value="@click提示-不带()" @click="showInfo">

2.v-on="表达式的形式"

注意：当事件的逻辑比较简单时，可以直接以表达式的形式直接书写在取值内容中

//比如这里点击事件只需要对flag进行取反操作，这种简单的逻辑，可以直接写在v-on取值内容中
<input type="button" value="flag=!flag" @click=" flag = !flag; flag1 = !flag; ">

3.v-on="对象的形式"

通过对象的形式可以同时绑定不同类型的事件，

对象以{ 事件名1：回调函数，事件名2：回调函数，.....}

（1）通过object对象的形式可绑定多个事件，以对象的形式书写

<input type="text" placeholder="input&change" v-on=" { input:callbackA,change:callbackB } ">
<script type="module">
    methods: {
         callbackA() {
             console.log("input事件触发");
         },
         callbackB() {
             console.log("change事件触发");
         },
    },
</script>

（2）事件的取值，可以通过读取data数据仓库中的数据，再数据中以对象的形式编写回调函数

<input type="text" placeholder="input&change" v-on="events">
<script>
     let vm = new Vue({
         el: "#app",
         data() {
                // console.log(this);
                return {
                    events: {
                        input: this.callbackA,
                        change: this.callbackB
                    },
                }
            },
         }
</script>

4.v-on="数组的形式"

注意：以数组的形式是绑定单一事件，给单一事件取值不同的回调函数，不可以同时绑定多个不同类型的事件

<input type="button" value="绑定两个回调" @click="[ callbackC,callbackD ]">

二、绑定事件的传参

1.匿名参数

匿名参数包括：匿名的字符串，对象，数值，布尔值，数组，构造函数实例对象，集合等；

<input type="button" value="事件匿名参数" 
    @click="printArgs('字符串',123,false,[1,2],{a:1},new Date(),new Set([1,2]) )"
>

2.vue数据仓库中的数据

注意：参数需要符合 JS 规范；

<input type="button" value="事件仓库变量参数" 
     @click="printArgs( msg,info,`仓库变量msg的值是:${msg}` )"
>

3.事件源对象($event)

注意：JS 中的事件源对象是 event 关键字，vue中为了和 变量名区分，必须加$event

<input type="button" value="点击事件源对象" @click="printEvent( $event )">

4.注意在vue中的doom树上的this的指向问题

在vue3的doom中，this指向当前与vue实例挂载的vue实例对象；

在vue2中doom中，this指向window;

所以，当我们需要获取当前容器标签时，想通过原生js中this指向js的doom对象来获取事件对象行不通了；如果需要获取事件源对象，需要通过$event来获取，事件源对象的数据信息全部在$event身上；

比如：我们需要获取input框的输入内容时，可以通过事件源对象身上的target.value来获取；

当然也可以通过 v-model 数据的双向绑定(数据与data仓库中的变量双向变绑定)来获取值

<input type="text" @input="getInputNewValue( $event.target.value )">

三、事件修饰符

事件修饰符：vue为v-on绑定的事件提供了内置定义好的事件行为模式的代码，用于简化代码开发，这种事件修饰功能，在开发中称为 语法糖；

vue3中的事件修饰符，可以对绑定的事件起到限定作用；

事件修饰符	功能
.prevent	阻止默认行为；比如，默认的鼠标右击行为
.once	一次性修饰符，事件只执行一次
.stop	阻止事件传播修饰符(包括事件冒泡和捕获机制)
.native	解析js原生事件
.{keyAlias}	按键修饰符；只有触发某些按键的事件才触发事件；如@keydown.Enter="function(){}"
.self	只有事件从元素本身发出才触发处理函数。事件冒泡捕获机制都不能触发添加了.self修饰的事件；
.capture	在捕获模式添加事件监听器。

 1.动态绑定事件

vue2.6^ 版本提供 事件绑定时事件名描述关键字 [] , [] 中定义名字将被作为仓库变量进行加载

<input type="text" v-on:[en]=" msg = $event.target.value ">
<script type="module">
    createApp({
            data(){
                return {
                    msg:"",
                    en:"input",
                    ce:"click",
                    num:5
                }
            })
</script>

可以通过切换data数据仓库中的en值，来修改事件类型