The currentTarget
read-only property of the Event
interface identifies the element to which the event handler has been attached.
This will not always be the same as the element on which the event was fired, because the event may have fired on a descendant of the element with the handler, and then bubbled up to the element with the handler. The element on which the event was fired is given by Event.target
.
An EventTarget
representing the object to which the current event handler is attached.
This example illustrates the difference between currentTarget
and target
.
HTML
The page has a "parent" <div>
containing a "child" <div>
.
<div id="parent">
Click parent
<div id="child">Click child</div>
</div>
<button id="reset">Reset</button>
<pre id="output"></pre>
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.
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.