前端进阶之旅前端进阶之旅
  • 基础篇HTML/CSS/JS 打底
  • 进阶篇原理与工程化
  • 高频篇面试最常问的那批
  • 精选篇按模块收敛的总结
  • 手写篇常考代码手写实现
  • 面经篇真实面试问题复盘
  • AI 篇NEWAI 时代的前端考点
  • 历年面经NEW按年份追踪真实考点
  • 每日一题每天一道,攒手感
  • 专项自测100 题快速查漏
  • 小程序题库小程序专项刷题
  • 算法题库NEW在线编码即时判题
  • 知识卡片NEW碎片时间过考点
  • 面试题大全常见问题解析
  • AI 答疑NEW随时提问,即时解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • AI 定制路线NEW按你的简历现排
  • AI 知识地图NEW串起全站知识点
  • 原理篇React / Vue 源码拆解
  • HTTP从报文一路讲到 HTTPS
  • 浏览器渲染、事件循环、进程
  • 计算机基础Linux、网络、操作系统
  • 设计模式23 种模式怎么用
  • Node学习指南从环境搭建到服务端
  • NPM工作流script、依赖与发布
  • Docker容器化部署上手
  • Canvas图形与动画实战
  • 前端系统进阶学习大型项目工程化
  • 前端综合文章长期沉淀的实践文
  • 思维导图知识点全景图
  • 学习路线按图索骥不跑偏
  • AI 热点NEWAI 每日动态
  • 公众号动态公众号历史文章
  • 博客动态站长的技术博客
  • 开发者导航常用工具与文档站
  • 基础篇HTML/CSS/JS 打底
  • 进阶篇原理与工程化
  • 高频篇面试最常问的那批
  • 精选篇按模块收敛的总结
  • 手写篇常考代码手写实现
  • 面经篇真实面试问题复盘
  • AI 篇NEWAI 时代的前端考点
  • 历年面经NEW按年份追踪真实考点
  • 每日一题每天一道,攒手感
  • 专项自测100 题快速查漏
  • 小程序题库小程序专项刷题
  • 算法题库NEW在线编码即时判题
  • 知识卡片NEW碎片时间过考点
  • 面试题大全常见问题解析
  • AI 答疑NEW随时提问,即时解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • AI 定制路线NEW按你的简历现排
  • AI 知识地图NEW串起全站知识点
  • 原理篇React / Vue 源码拆解
  • HTTP从报文一路讲到 HTTPS
  • 浏览器渲染、事件循环、进程
  • 计算机基础Linux、网络、操作系统
  • 设计模式23 种模式怎么用
  • Node学习指南从环境搭建到服务端
  • NPM工作流script、依赖与发布
  • Docker容器化部署上手
  • Canvas图形与动画实战
  • 前端系统进阶学习大型项目工程化
  • 前端综合文章长期沉淀的实践文
  • 思维导图知识点全景图
  • 学习路线按图索骥不跑偏
  • AI 热点NEWAI 每日动态
  • 公众号动态公众号历史文章
  • 博客动态站长的技术博客
  • 开发者导航常用工具与文档站
首页程序员面试题库event.target 与 currentTarget 区别
浏览浏览器事件系统

事件回调中 event.target 与 event.currentTarget 有何区别?在事件委托中应使用哪个?

event.target 是事件最初作用对象,event.currentTarget 是当前事件监听器所绑定的元素。事件委托中判断实际来源应使用 target。

前端进阶之旅 · 一题精讲更新于 2026.09.05
浏览器#事件系统#异步编程
先看核心答案
理解线索

属性分工与委托用法

  1. target事件原始目标,随点击点变化,不随冒泡改变
  2. currentTarget当前回调绑定元素,回调后变 null
  3. 委托选 target父级监听中定位真正点击的子元素

在目标阶段两者相同;一旦经过中间节点才体现差异。

核心回答

先记住这个答案

当事件在父子嵌套中冒泡时,target 始终指向原始触发元素,currentTarget 指向当前正在执行回调的挂载元素。在事件委托中,监听器绑定在父级,currentTarget 固定为父级,无法定位实际交互项,所以必须用 event.target 配合 closest 或 matches 来识别具体目标,才能实现正确分发。

  • target 指向事件起点元素
  • currentTarget 指向监听器挂载点
  • 委托时用 target 定位具体点击对象

触发源头与处理节点的对照

当点击事件命中父容器中的子元素后,事件会冒泡回父层。父容器监听器运行时,event.target 永远指最初接收点击的那个子元素,即使冒泡经过多个层级也不改变;而 event.currentTarget 则是父容器本身,因为事件处理函数是挂在这上面的。只有当监听器绑在触发元素自身时,两者才会相等,其余阶段必然不同。

这种分化源于事件传播记录的是路径不同字段。target 是事件派发的起点,currentTarget 是当前派发到的节点。因此在一个嵌套节点各自绑定事件的页面里,每个回调中的 currentTarget 都是自己绑定的元素,而 target 永远相同。浏览器在回调执行完毕后会把 currentTarget 置为 null,所以它只存在于同步回调期间。

列表项动态点击的归属判断

假设一个待办列表 <ul id="tasks">,每个 <li> 有删除按钮。若直接在 li 上绑定 click,每次动态添加 li 都要重新 addEventListener。改为委托:只在 ul 上注册一次 click 监听,依靠 event.target 判断用户是按在哪个 li 或其上哪个删除按钮。这要求事件能冒泡到 ul,且过滤器能正确归一。

监听器内先用 let targetEl = event.target.closest('li') 把文本节点和子按钮都归一为最近的 li。如果 targetEl 是 null 或者它的父级不是当前列表,就 return。通过后执行删除或变更逻辑。这样后续新增的 li 也能触发同一监听,免去重复绑定,且无需维护监听器索引。

失效条件和处理代价

委托失效的典型条件是事件本身不冒泡,如 focus、mouseleave、scroll,它们不会到达父级,target 与 currentTarget 的差异无从发挥。这时需要改用捕获阶段或者 focusin/mouseleave 的替代事件。另一个易错点是异步读取:setTimeout 回调里访问 event.currentTarget 会拿到 null,因为浏览器已经重置属性。

要正确处理,应在同步回调中先把需要保留的元素引用存入局部变量,比如 const container = event.currentTarget,再在异步逻辑里使用该变量。对 target 也不必保留整个事件,最好把 event.target 也转成普通 DOM 引用。判断委托状态时,不要依赖 currentTarget 参与业务匹配,只认 target。

回答前,多想一步

容易答错的地方

将 currentTarget 当作实际点击元素
在父级监听器里 currentTarget 固定是父元素,用 event.currentTarget.id 判断永远拿不到子项。正确是取 event.target 并用 closest 上溯。很多初级错误导致所有点击都认为发生在父容器。
在异步中把事件对象传出使用
事件回调结束令 currentTarget 为 null,若把 event 存入 setTimeout 再读 currentTarget 会得到 null,且 target 仍可读但已失去绑定上下文。应在回调最先同步拷贝所需字段或元素引用。
试着用自己的话回答

面试官还会怎么问?

点击 li 中的文字节点时,event.target 是文本还是节点?

浏览器会把文本节点的命中归一为其父元素,因此 event.target 通常是包含该文字的 li,而不是文本节点本身。手动分派事件时 target 可以是任意元素,但实际点击会遵循该规则。

在捕获阶段注册的监听器,target 和 currentTarget 何时不同?

捕获阶段发生在目标节点之前,所以祖先监听器最早执行,此时 currentTarget 是祖先,target 是目标;当派发到目标节点自身时二者暂时相等,随后冒泡阶段又分化。

委托时想排除点击特定类名怎么办?

可以先通过 event.target.closest('li') 找到主体,再检查该主体是否包含排除条件,如匹配 .disabled。在目标上调用 closest 不会跨出当前作用域。

从一道题,走向一组知识

把知识连起来

事件系统

DOM 事件传播的三个阶段(捕获、目标、冒泡)分别是什么,监听器在哪个阶段触发?

了解事件从捕获到冒泡的路径有助于从机制上理解 target 和 currentTarget 在各阶段的取值,加深委托原理。

事件系统

事件委托如何解决动态添加元素的监听问题?请给出一个具体实现思路。

通过动态列表场景说明委托的核心优势,与本答案中 target 定位来源的需求互补。

参考资料

  • Event: currentTarget property

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 触发源头与处理节点的对照
  3. 列表项动态点击的归属判断
  4. 失效条件和处理代价
  5. 容易答错的地方
  6. 面试官还会怎么问
  7. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑