在 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 自动塞进去。
