event.target始终指向实际触发事件的DOM元素，event.currentTarget则指向当前执行事件处理函数的绑定元素；前者固定不变，后者随事件冒泡阶段动态变化。
直接看 event.target 和 event.currentTarget 就行 —— 前者永远是“谁被点/触发”，后者永远是“谁在执行这个函数”。
target 是事件真正的起点
它指向用户实际交互的那个 DOM 元素，不管事件有没有冒泡、有没有委托、有没有被阻止传播，它从事件派发那一刻起就固定不变。
- 点击一个按钮内部的图标，
event.target就是那个<svg>或<i>元素 - 哪怕你在
<body>上监听 click，只要用户点的是某个<span>，target依然是那个<span> -
event.target === event.target永远为 true，它不随事件流阶段变化
currentTarget 是当前执行 handler 的绑定元素
它代表事件监听器注册在哪个元素上，且只在当前回调函数运行时有效。在冒泡过程中，它会随着事件向上走到哪一层，就变成那一层的元素。
- 给
<ul>绑定 click，用户点<li>，冒泡上来后，currentTarget是<ul> - 同一个事件处理函数里，
this和event.currentTarget始终相等 - 如果在目标元素自身上触发（没冒泡），
target和currentTarget才会一致
快速验证两者是否相同
在事件回调中加一句判断，就能立刻知道是不是直接触发：
立即学习“Java免费学习笔记（深入）”；
if (e.target === e.currentTarget) { /* 事件没冒泡，就在本元素上发生的 */ }if (e.target.matches('button.delete')) { /* 精准识别是否点中了带 delete 类的按钮 */ }-
console.log(e.target.tagName, e.currentTarget.id)对比输出，一目了然
别把 this 当成源头
新手常误以为 this 就是被点击的元素，其实它只是当前绑定监听器的元素。尤其在事件委托场景下，this 很可能是父容器，而真正被点的是子节点 —— 这时候必须用 e.target 才能拿到真实操作对象。
