rrentTarget - Web APIs | MDN

• Skip to main content
• Skip to search

Event: currentTarget property Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

• Learn more
• See full compatibility
• Report feedback

Note: This feature is available in Web Workers.

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.

Note that the value of currentTarget is only available in a handler for the event. Outside an event handler it will be null. This means that, for example, if you take a reference to the Event object inside an event handler and then access its currentTarget property outside the event handler, its value will be null.

In this article

• Value
• Examples
• Specifications
• Browser compatibility
• See also

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.

jsconst 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②

Browser compatibility

See also

• Learn: Event bubbling

Help improve MDN

Was this page helpful to you? Yes No Learn how to contribute

This page was last modified on ⁨Dec 19, 2024⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content Filter sidebar

1. Document Object Model (DOM)
2. Event
3. Constructor
   1. Event()
4. Instance properties
   1. bubbles
   2. cancelable
   3. cancelBubble Deprecated
   4. composed
   5. currentTarget
   6. defaultPrevented
   7. eventPhase
   8. explicitOriginalTarget Non-standard
   9. isTrusted
   10. originalTarget Non-standard
   11. returnValue Deprecated
   12. srcElement Deprecated
   13. target
   14. timeStamp
   15. type
5. Instance methods
   1. composedPath()
   2. initEvent() Deprecated
   3. preventDefault()
   4. stopImmediatePropagation()
   5. stopPropagation()
6. Related pages for DOM
   1. AbortController
   2. AbortSignal
   3. AbstractRange
   4. Attr
   5. CDATASection
   6. CharacterData
   7. Comment
   8. CustomEvent
   9. DOMError Deprecated
   10. DOMException
   11. DOMImplementation
   12. DOMParser
   13. DOMTokenList
   14. Document
   15. DocumentFragment
   16. DocumentType
   17. Element
   18. EventTarget
   19. HTMLCollection
   20. MutationObserver
   21. MutationRecord
   22. NamedNodeMap
   23. Node
   24. NodeIterator
   25. NodeList
   26. ProcessingInstruction
   27. QuotaExceededError Experimental
   28. Range
   29. ShadowRoot
   30. StaticRange
   31. Text
   32. TreeWalker
   33. XMLDocument
   34. XPathEvaluator
   35. XPathExpression
   36. XPathResult
   37. XSLTProcessor
7. Guides
   1. Anatomy of the DOM
   2. Attribute reflection
   3. Selection and traversal on the DOM tree
   4. Building and updating the DOM tree
   5. Working with events