什么是事件对象？

事件对象是在事件触发时产生的对象，该对象保存了事件触发时的相关信息。

事件对象有以下两种获取方式。

• 通过事件方法的参数获取事件对象

• 通过$event获取事件对象

1. 通过事件方法的参数获取事件对象

在v-on绑定的用于处理事件的方法中，可以接收到一个参数，这个参数就是事件对象，示例代码如下。

<template>
  <button @click="greet">Greet</button>
</template>
<script setup>
const greet = event => console.log(event)
</script>

演示事件对象的使用方法

<template>
  <div>count的值为：{{ count }}</div>
  <button @click="addCount">count+1</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(1)
const addCount = event => {
  count.value++
  if (count.value % 2 === 0) { event.target.style.border = '3px dotted' } else { event.target.style.border = '3px solid' } }
</script>

2. 通过$event获取事件对象

$event是Vue提供的内置变量，使用它可以获取事件对象，示例代码如下。

<template>
  <button @click="change($event)">change</button>
</template>
<script setup>
const change = event => console.log(event)
</script>

演示通过$event获取事件对象的方式

const addCountN = (n, event) => {
  count.value += n
  if (count.value % 2 === 0) {
    event.target.style.border = '3px dotted'
  } else {
    event.target.style.border = '3px solid'
  }
}

修改页面结构代码，增加一个按钮。

<button @click="addCountN(3, $event)">count+n</button>

什么是事件修饰符？

为了简化开发，Vue为开发者提供了事件修饰符，它可以与v-on配合使用，以便于对事件进行控制，让开发者更专注于逻辑。

事件修饰符用于修饰事件的行为，写在事件名称之后，多个事件修饰符可以串联使用。

通过事件修饰符可以实现的一些功能。

• 阻止默认事件行为

• 阻止事件冒泡

• 事件捕获

• 使事件只触发一次

• 使DOM元素只有自身触发事件时才执行事件方法

• 监听滚动事件

• 捕获特定按键

• 捕获鼠标按键

1. 阻止默认事件行为

通过.prevent事件修饰符可以实现阻止默认事件行为的功能。例如，在单击<a>标签时页面会自动跳转，这就是<a>标签的默认事件行为。

在实际开发中，如果默认事件行为与事件发生冲突，可以使用.prevent事件修饰符阻止默认事件行为，示例代码如下。

<a href="test.html" v-on:click.prevent>阻止默认行为</a>

2. 阻止事件冒泡

通过.stop事件修饰符可以实现阻止事件冒泡的功能，示例代码如下。

<template>
  <div v-on:click="show('我是父元素的事件')">
    <button v-on:click="show('我是子元素的事件')">事件冒泡</button>
    <button v-on:click.stop="show('我是子元素的事件')">阻止事件冒泡</button>
  </div>
</template>
<script setup>
let show = message => console.log(message)
</script>

3. 使DOM元素只有自身触发事件时才执行事件方法

通过.self事件修饰符可以实现只有DOM元素自身触发事件时才执行事件方法的功能，示例代码如下。

<template>
  <div v-on:click="show('我是祖先元素的事件')">祖先元素
    <div v-on:click.self="show('我是父元素的事件')">父元素
      <div v-on:click="show('我是子元素的事件')">子元素</div>
    </div>
  </div>
</template>
<script setup>
let show = message => console.log(message)
</script>

4. 事件捕获

通过.capture事件修饰符可以实现事件捕获的功能，示例代码如下。

<template>
  <div v-on:click.capture="show('我是父元素的事件')">
    <button v-on:click="show('我是子元素的事件')">事件捕获</button>
  </div>
</template>
<script setup>
let show = message =>  console.log(message)
</script>

5. 使事件只触发一次

通过.once事件修饰符可以实现使事件只触发一次的功能。.once事件修饰符用于阻止事件的多次触发，让事件只触发一次，示例代码如下。

<template>
  <button v-on:click.once ="show('我是当前元素的单击事件且只执行一次')">只执行一次</button>
</template>
<script setup>
let show = message => console.log(message)
</script>

6. 监听滚动事件

通过.passive事件修饰符可以实现监听滚动事件的功能。.passive事件修饰符主要用于优化移动端设备的滚屏性能。添加.passive事件修饰符后会优先响应滚动事件而不是滚动事件的回调函数，从而可提升性能。

使用.passive事件修饰符的示例代码如下。

<div v-on:scroll.passive="onScroll"></div>

7. 捕获特定按键

Vue提供了一些用于修饰键盘事件的修饰符，使用它们可以捕获特定按键，其中常用的修饰符如下。

• .enter：捕获Enter键。

• .esc：捕获Esc键。

• .tab：捕获Tab键。

• .delete：捕获Delete和Backspace键。

• .ctrl：捕获Ctrl键。

• .alt：捕获Alt键。

• .shift：捕获Shift键。

• .meta：在MacOS系统的键盘上捕获command键；在Windows系统的键盘上捕获Windows徽标键。

接下来以捕获Enter键为例，演示.enter事件修饰符的使用，示例代码如下。

<template> 
  <input type="text" v-on:keyup.enter="submit">
</template>
<script setup>
let submit = () => console.log('捕获到Enter键')
</script>

如果想实现只有按下Enter键时才能触发事件，可以通过.exact修饰符来实现，该修饰符允许控制由精确的系统修饰符组合触发的事件。

修改input元素实现仅有Enter键被按下的时候才触发，示例代码如下。

<input type="text" v-on:keyup.enter.exact="submit">

8. 捕获鼠标按键

Vue中提供了一些用于捕获鼠标按键的事件修饰符，其中常用的修饰符如下。

• .left：捕获鼠标左键。

• .middle：捕获鼠标中键。

• .right：捕获鼠标右键。

接下来以捕获鼠标左键为例，演示鼠标按键修饰符的使用，示例代码如下。

<template>
  <button v-on:click.left="show('捕获到鼠标左键')">按钮</button>
</template>
<script setup>
let show = message => console.log(message)
</script>