Event: currentTarget property - Web APIs | MDN
Value
An EventTarget representing the object to which the current event handler is attached.
Examples
currentTarget versus target
This example illustrates the difference between currentTarget and target.
HTML
The page has a "parent" <div> containing a "child" <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
The event handler is attached to the parent. It logs the value of event.currentTarget and event.target.
We also have a "Reset" button that just reloads the example.
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());
Result
If you click inside the child <div>, then target identifies the child. If you click inside the parent <div>, then target identifies the parent.
In both cases, currentTarget identifies the parent, because that's the element that the handler is attached to.
Specifications
| Specification |
|---|
| DOM # ref-for-dom-event-currenttargetâ‘¡ |