当前位置：首页 > news >正文

Vue 事件机制深度剖析：$event、e.target 与 e.currentTarget 的本质区别

news 2026/7/30 8:03:18

Vue 事件机制深度剖析：$event、e.target 与 e.currentTarget 的本质区别

1.1 前言

在 Vue 开发中，我们经常需要处理 DOM 事件。当调用事件处理函数时，我们通常希望访问原生 JavaScript 事件对象来获取更多的信息，比如点击坐标、目标元素等。这就涉及到一个关键语法：在 Vue 事件中传入 $event。同时，理解事件对象中的 e.target 和 e.currentTarget 是掌握事件委托和冒泡机制的基础。

1.2 基础用法：如何正确传入 $event

在 Vue 的模板语法中，我们不需要手动调用event.stopPropagation()等方法，而是将原生事件对象传递给方法即可。

1.2.1 语法格式

在方法名后直接拼接$event参数，Vue 会自动将事件对象注入。

1.2.2 代码示例

<div id="app"> <button @click="handleClick('Action', $event)">点击我</button> </div> <script> export default { methods: { handleClick(message, event) { console.log(message); // 输出 "Action" console.log(event); // 输出原生事件对象 } } } </script>

2.1 核心概念辨析：e.target 与 e.currentTarget

要理解它们的区别，首先要明白事件传播（冒泡）的机制。在事件处理函数被触发时，e.target和e.currentTarget指向的对象通常是不同的。

2.1.1 e.currentTarget 的含义

e.currentTarget指向的是当前绑定事件监听器的那个元素。换句话说，它代表事件被附加到的 DOM 节点。

2.1.2 e.target 的含义

e.target指向的是实际触发事件的那个子元素。这就是说，如果用户点击的是嵌套元素内部的一个按钮，e.target将指向这个按钮，而不是绑定了监听器的父容器。

2.2 交互流程图：事件触发时的变化

为了更直观地理解，我们可以通过 Mermaid 流程图来展示当点击子元素时，e.target和e.currentTarget的变化过程。

3.1 场景演示：父子元素嵌套

让我们通过一个具体的 HTML 结构来验证上述概念。假设我们有一个父容器 UL，里面包含多个 LI，并且点击 UL 或 LI 都会触发函数。

3.1.1 实现代码

<div id="app"> <ul @click="logEvent"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> <script> export default { methods: { logEvent(event) { console.log("e.target 标签名：", event.target.tagName); console.log("e.currentTarget 标签名：", event.currentTarget.tagName); console.log("-------------------"); } } } </script>

3.1.2 执行结果分析

当我们点击 LI 时，输出结果如下：

e.target输出 "LI" （实际点击的对象）
e.currentTarget输出 "UL" （绑定了监听器的对象）

3.2 场景演示：事件委托

理解e.target和e.currentTarget的最大价值在于实现“事件委托”。事件委托允许我们将事件监听器绑定到父容器上，而不是每个子元素上，从而提高性能。

3.2.1 逻辑判断

通常我们在父元素监听点击事件后，需要判断e.target是否为我们期望的元素。

3.2.2 代码实现

methods: { handleParentClick(event) { // 只有直接点击 li 时才执行逻辑 if (event.target.tagName === 'LI') { console.log('点击了列表项：' + event.target.innerText); } // 如果点击 li 内部的 span，通常不希望触发，除非使用 e.target 直接匹配 } }