Event：currentTarget 属性

备注： 此特性在 Web Worker 中可用。

Event 接口的 currentTarget 只读属性用于标识事件处理器所附加的元素。

这并不总是与触发事件的元素相同，因为事件可能在具有处理器的元素的后代上触发，然后通过事件冒泡到具有处理器的元素。事件的触发元素由 Event.target 给出。

请注意，currentTarget 的值仅在事件处理器中可用。在事件处理器外部，它将为 null。这意味着，例如，如果在事件处理器内部获得 Event 对象的引用然后在事件处理器外部访问其 currentTarget 属性，则其值将为 null。

值

一个 EventTarget，表示当前事件处理器所附加的对象。

示例

currentTarget 与 target 的区别

此示例说明了 currentTarget 和 target 之间的区别。

HTML

页面包含一个包含“子元素” <div> 的“父元素” <div>。

html

<div id="parent">
  点击父元素
  <div id="child">点击子元素</div>
</div>

<button id="reset">重置</button>
<pre id="output"></pre>

button,
div,
pre {
  margin: 0.5rem;
}

div {
  padding: 1rem;
  border: 1px solid black;
}

JavaScript

事件处理器被附加到父元素。它记录 event.currentTarget 和 event.target 的值。

我们还有一个用于重新加载示例的“重置”按钮。

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 = `当前目标：${currentTarget}\n`;
  output.textContent += `目标：${target}`;
});

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());

结果

如果你在子 <div> 中点击，则 target 将标识子元素。如果你在父 <div> 中点击，则 target 将标识父元素。

在这两种情况下，currentTarget 都标识父元素，因为那是处理器附加到的元素。

规范

Specification
DOM Standard # ref-for-dom-event-currenttarget②

浏览器兼容性

BCD tables only load in the browser

参见

事件冒泡