在 Vue 中使用 event 对象（即原生 DOM 事件对象）有多种方式，可以根据不同的场景灵活处理。以下是详细的使用方法和注意事项：
一、在事件处理函数中自动接收 event 对象
当使用 v-on 绑定事件时，Vue 会自动将原生的 event 对象作为最后一个参数传入处理函数。
<template>
<button @click="handleClick">点击我</button>
</template>
<script>
export default {
methods: {
handleClick(event) {
// event 就是原生的 MouseEvent 对象
console.log(event.target); // 指向触发事件的元素
console.log(event.type); // "click"
console.log(event.clientX); // 鼠标点击的 X 坐标
event.preventDefault(); // 阻止默认行为
event.stopPropagation(); // 阻止冒泡
}
}
}
</script>✅ 特点：无需显式传递，Vue 自动注入。
二、在内联语句中使用 $event
当需要在模板中传递自定义参数时，可以使用特殊变量 $event 来显式传递 event 对象。
<template>
<!-- 传递自定义参数，并手动传入 $event -->
<button @click="handleClick('button1', $event)">按钮1</button>
<button @click="handleClick('button2', $event)">按钮2</button>
</template>
<script>
export default {
methods: {
handleClick(buttonName, event) {
console.log(`点击了 ${buttonName}`);
console.log('事件类型:', event.type);
console.log('点击坐标:', event.clientX, event.clientY);
}
}
}
</script>✅ 关键点：
$event是 Vue 提供的特殊变量，代表原生事件对象。
三、结合事件修饰符使用
event 对象仍然可用，但修饰符会预先处理一些行为。
<template>
<!-- .prevent 会自动调用 event.preventDefault() -->
<form @submit.prevent="handleSubmit">
<input type="text" />
<button type="submit">提交</button>
</form>
<!-- .stop 会自动调用 event.stopPropagation() -->
<div @click="handleDivClick">
<button @click.stop="handleBtnClick">按钮</button>
</div>
</template>
<script>
export default {
methods: {
handleSubmit(event) {
// 尽管用了 .prevent，event 仍可用
console.log('表单提交被拦截，但可以访问 event:', event);
// 可在此发起异步提交
},
handleDivClick(event) {
console.log('div 被点击');
},
handleBtnClick(event) {
console.log('按钮被点击，但不会冒泡到 div');
}
}
}
</script>四、访问 $event 的常用属性和方法
| 类别 | 常用属性/方法 | 说明 |
|---|---|---|
| 基本信息 | event.type, event.target, event.currentTarget | 事件类型、触发元素、监听元素 |
| 鼠标事件 | clientX/Y, pageX/Y, offsetX/Y | 鼠标坐标 |
| 键盘事件 | event.key, event.keyCode, event.ctrlKey | 键值、是否按下 Ctrl 等 |
| 控制行为 | event.preventDefault() | 阻止默认行为（如提交、跳转） |
event.stopPropagation() | 阻止事件冒泡 | |
event.stopImmediatePropagation() | 阻止剩余监听器执行 |
五、在组合式 API（Composition API）中使用
在 setup() 或 <script setup> 中，event 的使用方式一致。
<script setup>
import { ref } from 'vue'
const count = ref(0)
function handleClick(event) {
count.value++
console.log('当前点击次数:', count.value)
console.log('事件对象:', event)
}
</script>
<template>
<button @click="handleClick">点击次数: {{ count }}</button>
</template>六、注意事项
$event在箭头函数中需显式传递
<!-- 正确 -->
<button @click="(e) => handleClick('arg', e)">点击</button>
<!-- 错误：无法访问 event -->
<button @click="() => handleClick('arg')">点击</button>event对象是原生 DOM 事件对象，不是 Vue 自定义的。- 在
v-on中使用.once、.passive等修饰符时，event依然可用，只是行为被修饰。
总结
| 场景 | 使用方式 |
|---|---|
| 简单事件处理 | 直接在方法中接收 event 参数 |
| 需要传递自定义参数 | 模板中使用 $event 显式传递 |
| 阻止默认行为/冒泡 | 使用 .prevent / .stop 修饰符，或在方法中调用 preventDefault() / stopPropagation() |
| 组合式 API | 与选项式 API 用法一致 |
✅ 核心原则：
Vue 不会屏蔽原生event对象，开发者可以自由访问和操作它，同时提供了$event和修饰符来提升开发效率。
THE END
