前端/移动开发面试题更新 2026-08-05

请说明在 Vue 模板中通过 $event 获取事件对象后,e.target 与 e.currentTarget 这两个属性各自代表什么,并比较它们的差异及适用场景。

前端/移动开发技术原理Vue

考察说明

考查对 DOM 事件对象中 target 与 currentTarget 属性的理解,以及它们在实际事件处理中的区别。

回答思路

  1. 【回答框架 1】e.target 指向触发事件的具体元素,即事件真正发生的目标。例如在列表项点击时,若点击的是内部的按钮,e.target 就是该按钮。
  2. 【回答框架 2】e.currentTarget 指向事件绑定的元素,即事件处理函数所挂载的元素。在 Vue 中通常是用 @click 等指令绑定的那个元素,例如整个列表项。
  3. 【回答框架 3】区别在于:target 是事件传播路径上的最底层元素,而 currentTarget 是当前处理事件的元素。由于事件冒泡,两者可能不同。
  4. 【回答框架 4】在事件处理中,若需要判断事件来源,可用 e.target;若需要获取绑定元素的相关数据或属性,应使用 e.currentTarget,并注意在回调函数中 this 的指向。
  5. 【回答框架 5】在 Vue 中,若在模板中传入 $event,两者分别指向对应的 DOM 元素,但需注意事件委托时 currentTarget 始终是绑定监听器的元素,而 target 是实际点击的元素。
  6. 【关键点 1】e.target 是事件实际触发的元素,e.currentTarget 是事件监听的元素。
  7. 【关键点 2】在事件冒泡中,若点击子元素,父元素的事件处理中 target 是子元素,currentTarget 是父元素。
  8. 【关键点 3】Vue 中通过 $event 传入的事件对象,其 target 和 currentTarget 行为与原生 DOM 事件一致。
  9. 【易错点 1】在事件处理函数中,若使用箭头函数,this 不会自动绑定到当前元素,而 currentTarget 仍可用。
  10. 【易错点 2】注意区分 e.target 与 e.currentTarget 在事件委托中的不同,避免因误用导致逻辑错误。