W3cubDocs

/Web APIs

Event: currentTarget property

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.

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>

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
currentTarget 1 12 1 9
6–9On Internet Explorer 6 through 8, the event model is different. Event listeners are attached with the non-standard EventTarget.attachEvent method. In this model, there is no equivalent to event.currentTarget and this is the global object. One solution to emulate the event.currentTarget feature is to wrap your handler in a function calling the handler using Function.prototype.call with the element as a first argument. This way, this will be the expected value.
7 1 4.4 18 4 10.1 1 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget