target是实际触发事件的元素,currenttarget是当前执行事件处理函数的绑定元素;冒泡时target始终为最初点击元素,currenttarget随冒泡路径变化;事件委托依赖target定位真实目标,箭头函数中需用currenttarget替代this。

区分 target 和 currentTarget 的核心就一句话:target 是你点(或触发)的那个元素,currentTarget 是当前正在执行事件处理函数的那个绑定元素。它们在事件冒泡中经常不同,尤其在事件委托场景下,这个区别直接决定你能不能拿到正确的点击目标。
什么时候 target 和 currentTarget 相同?
只有当事件刚好发生在你绑定监听器的元素上,且没有冒泡或捕获干扰时,两者才一致:
- 点击一个
<button></button>,而click事件监听器也直接绑在这个button上 →event.target === event.currentTarget - 事件处于“目标阶段”(即传播路径正落在该元素本身),此时两个属性指向同一个 DOM 节点
为什么冒泡时它们会不一样?
事件冒泡意味着:点击子元素 → 事件向上逐层触发父级监听器。每到一层,currentTarget 就变成那一层的绑定元素,而 target 始终锁定最初被点击的那个节点:
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
- HTML 结构:
<div id="box"><span id="text">Hello</span></div> - 监听器绑在
#box上,你却点了#text - 此时:
event.target是<span></span>(真正被点击的),event.currentTarget是<div>(当前执行 handler 的绑定元素) <h3>事件委托必须靠 target 来定位真实操作对象</h3> <p>当你用一个父容器监听多个子项(比如列表项、按钮组),<code>currentTarget总是父容器,毫无区分度;真正有用的,是target:- 给
ul绑 click,实际想响应每个li的点击 → 在 handler 中用event.target.tagName === 'LI'判断是否点中了li - 如果误用
currentTarget,所有点击都会返回ul,根本无法识别具体是哪个子项被点 - 注意:
target可能是深层子元素(如li > span > i),必要时可用event.target.closest('li')向上查找最近匹配项
箭头函数里 this 不指向绑定元素,得靠 currentTarget
普通函数中
this默认等于currentTarget,但箭头函数不绑定this,此时必须显式使用event.currentTarget:- 错误写法:
el.addEventListener('click', () => console.log(this))→this是外层作用域,不是el - 正确写法:
el.addEventListener('click', (e) => console.log(e.currentTarget))→ 明确拿到绑定元素 - 同理,若需在事件处理中修改绑定元素样式:
e.currentTarget.classList.toggle('active')
- 给










