在 Vue 3 中获取原生 DOM 事件对象，最直接方式是在事件处理器中显式接收参数，Vue 自动传入 MouseEvent、KeyboardEvent 等原生事件对象；推荐写法为 @click="handleClick($event)" 或 @click="handleClick"（无括号），避免 @click="handleClick()" 导致事件丢失。

在 Vue 3 中获取原生 DOM 事件对象，最直接、最常用的方式就是在事件处理器中**显式接收参数**，Vue 会自动把原生事件（如 MouseEvent、KeyboardEvent）传进来，不需要额外封装或手动查 event 全局变量。

模板中直接传参：用 $event 或直接写形参

这是最推荐的写法，简洁且语义清晰：

• @click="handleClick($event)" → 方法里写 const handleClick = (e) => { console.log(e.target); }
• @click="handleClick" → 同样生效，Vue 会自动注入事件对象（仅限方法名不带括号调用）
• 注意：@click="handleClick()"（空括号）会丢失事件对象；@click="handleClick"（无括号）才是正确简写

同时传自定义数据和事件对象

比如点击列表项时既要拿 id，又要阻止默认行为：

• 模板写：@click="handleItemClick(item.id, $event)
• 方法定义：const handleItemClick = (id, e) => { e.preventDefault(); console.log(id); }
• $event 必须显式写出，位置可前可后，但需与函数参数顺序一致

内联表达式里直接操作 event

适合简单逻辑，比如快速阻止冒泡或提交：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• @click="$event.stopPropagation(); isActive = false"
• @submit="$event.preventDefault(); onSubmit()"
• 内联中 $event 可直接用，无需声明，但别塞复杂逻辑

配合修饰符仍能访问完整事件对象

修饰符（如 .stop、.prevent）只是语法糖，不影响事件对象传递：

• @click.stop="handleClick($event) → e.stopPropagation() 已由修饰符执行，你还能读 e.clientX 等属性
• 修饰符和 $event 完全兼容，可共存

不复杂但容易忽略。关键就一条：想用原生事件，就在 handler 里留个参数，Vue 自动塞进去。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！