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

在 Vue 事件处理中，$event 是原生 DOM 事件的引用，可以通过它访问事件对象。e.target 和 e.currentTarget 是事件对象的两个常用属性，它们的主要区别在于指向的目标不同。

1. `e.target`

定义：e.target 是触发事件的实际目标元素，即事件最初发生的元素。
特点：
- 在事件冒泡或捕获阶段，e.target 始终指向最初触发事件的元素。
- 如果事件发生在子元素上，e.target 指向子元素，而不是绑定事件的父元素。
使用场景：当你需要获取实际触发事件的元素时，使用 e.target。

2. `e.currentTarget`

定义：e.currentTarget 是绑定事件的当前元素，即事件处理函数所在的元素。
特点：
- 在事件冒泡或捕获阶段，e.currentTarget 始终指向绑定事件的元素。
- 如果事件发生在子元素上，e.currentTarget 仍然指向绑定事件的父元素。
使用场景：当你需要获取绑定事件的元素时，使用 e.currentTarget。

3. 区别对比

特性	`e.target`	`e.currentTarget`
指向目标	触发事件的实际元素	绑定事件的当前元素
事件冒泡阶段	始终指向最初触发事件的元素	始终指向绑定事件的元素
使用场景	获取实际触发事件的元素	获取绑定事件的元素

4. 代码示例

<template>
  <div @click="handleClick">
    <button>点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(e) {
      console.log('e.target:', e.target); // 输出：<button>点击我</button>
      console.log('e.currentTarget:', e.currentTarget); // 输出：<div>...</div>
    }
  }
};
</script>

解释：
- 当点击按钮时，e.target 指向 <button>，因为它是实际触发事件的元素。
- e.currentTarget 指向 <div>，因为它是绑定事件的元素。

5. 实际应用场景

场景 1：事件委托

在事件委托中，通常需要在父元素上绑定事件，但需要知道实际触发事件的子元素。

<ul @click="handleItemClick">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

methods: {
  handleItemClick(e) {
    if (e.target.tagName === 'LI') {
      console.log('点击的项:', e.target.textContent);
    }
  }
}

这里使用 e.target 获取实际点击的 <li> 元素。

场景 2：获取绑定事件的元素

如果需要获取绑定事件的元素，可以使用 e.currentTarget。

<div @click="handleClick">
  点击区域
</div>

methods: {
  handleClick(e) {
    console.log('绑定事件的元素:', e.currentTarget);
  }
}

这里使用 e.currentTarget 获取绑定事件的 <div> 元素。

6. 总结

e.target：指向触发事件的实际元素，适合用于事件委托或获取实际触发事件的元素。
e.currentTarget：指向绑定事件的元素，适合用于获取绑定事件的元素。
在 Vue 中，通过 $event 可以访问原生事件对象，结合 e.target 和 e.currentTarget 可以灵活处理事件逻辑。

理解这两者的区别有助于更好地处理事件逻辑，尤其是在事件委托和复杂 DOM 结构中。

THE END

Vue 基础面试题