Event：currentTarget 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

备注： 此特性在 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

参见

事件冒泡