Vue 3 中可通过模板中显式传递 $event 获取原生 DOM 事件对象；支持与自定义参数共用、箭头函数正确传参，且在 Composition API 中行为一致。

在 Vue 3 中，可以通过在模板中显式传递 $event 来获取原生 DOM 事件对象。

直接在模板中传入 $event

这是最常用的方式。当使用内联事件处理器时，Vue 提供了特殊的变量 $event，它代表原生的浏览器事件对象：

<button @click="handleClick($event)">点击我</button>

对应的方法中就可以接收并使用它：

function handleClick(event) {
  console.log(event); // 原生 MouseEvent 对象
  console.log(event.target); // 触发事件的 DOM 元素
  event.preventDefault(); // 可以调用原生方法
}

在方法中同时访问自定义参数和原生事件

如果需要传入额外参数（比如 ID、索引等），可以把 $event 当作一个普通参数显式写出来：

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

立即学习“前端免费学习笔记（深入）”；

<button @click="handleClick(item.id, $event)">删除</button>

JavaScript 方法签名需与之匹配：

function handleClick(id, event) {
  console.log('ID:', id);
  console.log('原生事件:', event);
  event.stopPropagation();
}

使用箭头函数时注意 this 绑定

若在模板中使用箭头函数，需确保正确传递 $event，否则容易丢失：

<!-- ✅ 正确：显式传入 $event -->
<button @click="(e) => handleClick(e)">按钮</button>
<p><!-- ❌ 错误：没传参，handleClick 拿不到 event -->
<button @click="() => handleClick()">按钮</button>

Composition API 中的注意事项

在 setup() 或组合式函数中，$event 的行为不变，但要注意：

• 不需要在 JS 中声明 $event，它只在模板中作为特殊变量存在
• 事件处理器函数必须在 script 中正确定义并暴露给模板
• 如果使用 defineEmits 自定义事件，$event 仍指代原生事件，不影响自定义 emit