事件：currentTarget 属性
注意：此功能在 Web Workers 中可用。
Event 接口的只读属性 currentTarget 用于标识事件处理程序已附加到的元素。
这并不总是与触发事件的元素相同，因为事件可能在一个带有处理程序的元素的后代上触发，然后 冒泡 到带有处理程序的元素上。触发事件的元素由 Event.target 提供。
请注意，currentTarget 的值仅在事件的处理程序中可用。在事件处理程序之外，它将为 null。这意味着，例如，如果您在事件处理程序中获取了 Event 对象的引用，然后在事件处理程序之外访问其 currentTarget 属性，其值将为 null。
值
一个代表当前事件处理程序已附加到的对象的 EventTarget。
示例
currentTarget 与 target
此示例说明了 currentTarget 和 target 之间的区别。
HTML
页面上有一个包含“子”<div> 的“父”<div>。
html
<div id="parent">
Click parent
<div id="child">Click child</div>
</div>
<button id="reset">Reset</button>
<pre id="output"></pre>
JavaScript
事件处理程序已附加到父级。它会记录 event.currentTarget 和 event.target 的值。
我们还有一个“重置”按钮，用于重新加载示例。
js
const output = document.querySelector("#output");
const parent = document.querySelector("#parent");
parent.addEventListener("click", (event) => {
const currentTarget = event.currentTarget.getAttribute("id");
const target = event.target.getAttribute("id");
output.textContent = `Current target: ${currentTarget}\n`;
output.textContent += `Target: ${target}`;
});
const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());
结果
如果您单击子 <div> 内部，则 target 标识子级。如果您单击父 <div> 内部，则 target 标识父级。
在这两种情况下，currentTarget 都标识父级，因为处理程序已附加到该元素。
规范
| 规范 |
|---|
| DOM # ref-for-dom-event-currenttarget② |
浏览器兼容性
加载中…