最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Vue基础语法如何通过事件参数传递获取原生DOM事件对象
时间：2026-08-13 13:07:49 编辑：袖梨 来源：一聚教程网
Vue 模板中需显式写 $event 才能获取原生 DOM 事件对象，如 @click="handleClick($event)"；可与自定义参数共用，顺序需匹配方法签名；内联语句和修饰符均支持 $event。
在 Vue 模板中触发事件时，想拿到浏览器原生的 DOM 事件对象（比如 MouseEvent、KeyboardEvent），不需要额外封装或手动监听，Vue 本身就支持——关键在于写法要对。
直接用 $event 显式传递
模板里必须显式写出 $event，Vue 才会把原生事件对象传进去：
-
@click="handleClick($event)"→ 方法中能收到完整事件对象 -
@click="handleClick"（不带括号）→ Vue 不自动注入，方法收不到事件对象 -
@click="handleClick()"（空括号）→ 函数被调用，但事件对象丢失
同时传自定义参数和事件对象
实际开发中常要既传业务数据，又操作事件行为（比如阻止默认、获取坐标）：
- 模板：
@click="handleItemClick(item.id, $event)" - 方法：
handleItemClick(id, e) { e.preventDefault(); console.log(e.target); } -
$event必须显式写出；位置可前可后，但参数顺序要和方法一致
内联语句中直接使用 $event
简单逻辑可不写方法，直接在模板里处理：
@click="$event.stopPropagation(); isShow = false"@keyup.enter="$event.preventDefault(); submitForm()"- 适合调试或单行操作，避免复杂逻辑塞进模板
修饰符和 $event 可共存
Vue 的事件修饰符（如 .stop、.prevent）只是语法糖，不影响 $event 传递：
-
@click.stop="handleClick($event)"→ 冒泡已被阻止，你仍能读e.clientX或e.target - 修饰符和
$event互不干扰，该干啥还干啥