面试题：在 Vue 事件中传入 $event，使用 e.target 和 e.currentTarget 有什么区别？

在 Vue 的事件处理中，e.target 和 e.currentTarget 都是原生 DOM 事件对象的属性，它们都指向 DOM 元素，但代表的含义完全不同。理解它们的区别对于正确处理事件委托和事件冒泡至关重要。

核心区别

属性	含义
`e.target`	触发事件的那个最具体的（通常是叶子节点）DOM 元素。
`e.currentTarget`	当前正在处理事件的那个 DOM 元素，即事件监听器绑定在哪个元素上。

简单来说：

e.target 是“事件从哪里来” (The element that initiated the event)。
e.currentTarget 是“事件在哪里被处理” (The element that is handling the event)。

详细解释与示例

假设我们有以下 HTML 结构：

<div id="parent" @click="handleClick">
  <button id="child">点击我</button>
</div>

methods: {
  handleClick(e) {
    console.log('e.target:', e.target.id);        // 输出: child
    console.log('e.currentTarget:', e.currentTarget.id); // 输出: parent
  }
}

e.target：
- 当你点击 <button> 按钮时，这个点击动作直接发生在 <button> 元素上。
- 因此，e.target 指向的是 <button> 元素，其 id 为 child。
e.currentTarget：
- 在这个例子中，@click 事件监听器是绑定在 <div id="parent"> 上的。
- 尽管点击的是内部的按钮，但由于事件冒泡，点击事件会从 <button> 向上传播到 <div>，并被 <div> 上的监听器捕获。
- 所以，在 handleClick 函数执行时，当前正在处理这个事件的元素是 <div id="parent">。
- 因此，e.currentTarget 指向的是 <div> 元素，其 id 为 parent。

为什么这个区别很重要？

事件委托 (Event Delegation)：
- 这是 e.target 最常见的用途。你可以在一个父元素上监听事件，然后通过 e.target 判断是哪个子元素触发了事件，从而用一个监听器处理多个子元素的事件。
- 例如，为一个包含很多 <li> 的 <ul> 列表添加点击事件，无需为每个 <li> 单独绑定。
精确控制事件处理：
- 有时你只想在事件监听器绑定的元素本身被点击时才执行逻辑，而不是它的子元素。这时可以用 e.currentTarget 进行判断。

总结

特性	`e.target`	`e.currentTarget`
定义	触发事件的原始元素	绑定了事件监听器的当前元素
是否变化	在事件冒泡过程中始终不变	在事件冒泡过程中会变化（从子到父）
主要用途	事件委托，获取实际点击的元素	确保事件在特定元素上处理，避免子元素干扰

记住：$event 是 Vue 提供给你的访问原生事件对象的途径，而 e.target 和 e.currentTarget 是该原生事件对象的属性，它们的行为遵循标准的 DOM 事件模型。

THE END

Vue 基础面试题