事件：currentTarget 属性

注意：此功能在 Web Workers 中可用。

currentTarget 是 Event 接口的只读属性，它标识已附加事件处理程序的元素。

这并不总是与触发事件的元素相同，因为事件可能是在具有处理程序的元素的后代元素上触发的，然后冒泡到具有处理程序的元素。触发事件的元素由 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>

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 = `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②

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参见

事件冒泡