Vue3 入门指北（七）事件处理

前言

当我们需要监听页面的 DOM 事件的时候，我们可以使用 vue 提供的v-on指令来进行监听，当然也可以使用简写形式@，然后出入相应的JavaScript代码。

事件处理

事件处理器的值分为两类：

• 内联事件处理器：事件被触发时执行的内联 JavaScript 语句。

• 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

内联事件处理器

内联事件处理器常用于一些业务场景逻辑简单的地方。例如：

const num = ref(0)

<button @click="num++">Add 1</button><p>数值： {{ num }}</p>

方法事件处理器

当业务场景复杂的时候，内联的方式无法清晰简明的解决问题的时候。就可以通过使用方法事件处理器的形式，只需要传递一个 方法名，就会完成对该方法的调用。

const num = ref('0')
function add(event) {  // `event` 是 DOM 原生事件  if (event) {    console.log(event.target.tagName)  }}

<button @click="add">数值：{{num}}</button>

方法事件处理器接受的第一个参数为 DOM 的原生事件。通过 event.target.tagName 可以访问到该元素

vue 会通过检查v-on的值来判断是何种事件处理器。而像直接传递方法的，例如：add就是方法事件处理器。像add（）和num++这种形式的就会判为内联事件处理器。

在内联事件处理器中访问事件参数

当我们使用内联处理器的时候也想访问原生 DOM 事件的时候，可以通过$event变量的形式，或者箭头函数的形式来实现。

<!-- 使用 $event 变量 --><button @click="add('0', $event)">  Submit</button>
<!-- 使用箭头函数 --><button @click="(event) => add('0', event)">  Submit</button>

function add(value, event) {  if (event) {    event.preventDefault()  }  console.log(value)}