Vue事件处理中的事件对象的获取实现方式

事件对象 是浏览器在触发事件（比如点击按钮）时，自动生成的一个 “数据包”，里面存着事件的详细信息（比如点了哪个按钮、点在页面的坐标、事件类型是点击还是输入）。

Vue 里有 2 种方式拿到这个 “数据包”，本质都是为了拿到事件信息做交互，只是用法场景不同。

方式 1：方法参数自动接收（最简单常用）

场景：你只需要事件对象，不需要传额外参数时，用这种方式。

代码示例

<!-- 按钮点击时，Vue 会自动把事件对象传给 greet 方法 -->
<button @click="greet">点我Greet</button>

greet(cusEvent) { 
  // cusEvent 就是事件对象！名字你随便取（比如 e、event、myEvent 都可以）
  console.log(cusEvent.target.tagName); // 打印触发事件的标签名（比如 BUTTON）
}

类比理解

把 @click="greet" 想象成：

• 你点按钮 → 浏览器 “扔出” 一个事件对象 → Vue 自动 “接住”，并把它当 “默认礼物” 塞给 greet 方法。
• 方法里的参数名（比如 cusEvent），就像你给这个 “礼物” 起的外号，叫啥都行，只要能拿到里面的信息。

方式 2：用 $event 手动传递（需要传额外参数时用）

场景：你不仅需要事件对象，还想传其他参数（比如 ID、状态）时，必须用 $event 手动把事件对象传过去。

代码示例

<!-- 点击时，主动用 $event 把事件对象传给 greet2，同时还能传其他参数（比如 '额外信息'） -->
<button @click="greet2('额外信息', $event)">点我Greet2</button>

greet2(msg, event) { 
  // msg 是你传的 '额外信息'，event 是 $event 对应的事件对象，这个名字可以自己定义
  console.log(msg); // 打印：额外信息
  console.log(event.clientX); // 打印点击位置的 X 坐标
}

类比理解

把 @click="greet2('额外信息', $event)" 想象成：

你点按钮时，想给 greet2 方法传 2 个 “礼物”：

• 第一个礼物：你手动写的 '额外信息'（自定义参数）。
• 第二个礼物：必须用 $event 这个 “固定包装”，把事件对象包起来传过去。

方法里的参数（msg, event）要和传递顺序对应，这样才能正确拿到两个 “礼物”。

两种方式的核心区别

举个生活例子加深理解

假设你是餐厅服务员（方法），客人（按钮）点餐（触发事件）：

• 方式 1：客人只说 “结账”（@click="greet"），系统自动给你递上 “账单”（事件对象），你直接处理账单（greet(cusEvent)）。
• 方式 2：客人说 “结账，再加一份小吃”（@click="greet2('加小吃', $event)"），你需要同时拿到 “账单”（事件对象，用 $event 传）和 “加小吃” 的要求（自定义参数），再一起处理。

总结

• 事件对象 是浏览器给的 “事件详情包”，Vue 提供了 2 种拿包方式。
• 简单场景用 方式 1（自动接收），复杂场景（需要传额外数据）用 方式 2（$event 手动传）。
• 记住 $event 是 Vue 规定的 “传事件对象的固定语法”，而方法里的参数名可以自己随便取～

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论