e.target 与 e.currentTarget
约 558 字大约 2 分钟
2026-03-31
问题
e.target 与 e.currentTarget 的区别是什么？
e.target 与 e.currentTarget 都是 DOM 事件对象中的属性，用于获取触发事件的相关元素，当它们实际指向的元素不同。
e.target：表示触发事件的实际元素。e.currentTarget：表示事件监听函数绑定的元素。
HTML
<div id="parent" style="background-color: red;padding: 0 20px;">
parent
<div id="child" style="background-color: blue; padding: 0 20px;">child</div>
</div>javascript
document.getElementById("parent").addEventListener(
"click",
function (e) {
console.log("e.target:", e.target); // 如果点按钮，打印 button；如果点 div 区域，打印 div
console.log("e.currentTarget:", e.currentTarget); // 始终是 #parent 元素
},
true,
);如何在不同阶段触发监听？
addEventListener() 我们通常只传入了两个参数，但实际上还可以传入第三个参数，类型为 boolean，表示事件触发阶段。
false：默认值，表示事件冒泡阶段触发。true：表示事件捕获阶段触发。
click 事件被触发后会经历两个阶段：捕获阶段，目标阶段，冒泡阶段。
- 捕获阶段：从最外层元素开始，向目标元素传递。此时事件尚未到达目标元素。
- 目标阶段：事件到达目标元素。
- 冒泡阶段：从目标元素开始，依次经过其父元素，向最外层元素传递。
下面是一个示例：
HTML
<div id="grandparent">
<div id="parent">
<button id="child">Click me</button>
</div>
</div>javascript
const log = (phase, id, e) =>
console.log(`${phase}: ${id}，target: ${e.target.id}，currentTarget: ${e.currentTarget.id}`);
//
document
.getElementById("grandparent")
.addEventListener("click", (e) => log("capture", "grandparent", e), true);
document.getElementById("parent").addEventListener("click", (e) => log("capture", "parent",e), true);
document.getElementById("child").addEventListener("click", (e) => log("target", "child",e), true); // 捕获或冒泡都能触发 target
document.getElementById("child").addEventListener("click", (e) => log("target (bubble)", "child",e));
document.getElementById("parent").addEventListener("click", (e) => log("bubble", "parent",e), false);
document
.getElementById("grandparent")
.addEventListener("click", (e) => log("bubble", "grandparent",e), false);打开浏览器控制它，上面的代码执行结果为：
capture: grandparent，target: child，currentTarget: grandparent
capture: parent，target: child，currentTarget: parent
target: child，target: child，currentTarget: child
target (bubble): child，target: child，currentTarget: child
bubble: parent，target: child，currentTarget: parent
bubble: grandparent，target: child，currentTarget: grandparent可以看到事件的执行是先从外层开始，依次向内执行（捕获阶段），然后内向外执行（冒泡阶段）。事件触发元素都为 child（因为点击的是 child 元素）。