JavaScript Event target Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word TARGET

Definition

Event.target is a read-only reference to the object onto which the event was dispatched (MDN). For a click, that is usually the element that was clicked. It differs from event.currentTarget when the handler runs during bubbling or capturing on an ancestor.

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use event.target. Start with this line.

JavaScript
event.target
CallWhat it does
event.targetPrimary signature.

Built into the browser. Read event.target on an Event instance — no import required.

Library declarations
JavaScript
event.target

Parameters

ParameterDescription
closestOptional. Walk up from target to a matching element

Return Value

Return ValueDescription
*The current value of event.target.

JavaScript Examples

Example 1 — Read event.target

Log the element that was clicked.

JavaScript
document.getElementById("btn").addEventListener("click", (event) => {
  console.log(event.target.id); // "btn"
});
Try It Yourself

How It Works

  1. Bind the listener. The handler is attached to the button.
  2. Click fires. The browser dispatches the event onto that button.
  3. Read target. event.target is the button → "btn".
  4. Same as currentTarget here. Listener and origin are the same element.

Example 2 — target vs currentTarget

Listener on the parent; click the child and compare both properties.

JavaScript
const parent = document.getElementById("parent");

parent.addEventListener("click", (event) => {
  console.log(event.target.id);        // "child" when child is clicked
  console.log(event.currentTarget.id); // "parent"
});
Try It Yourself

How It Works

  1. Listener on parent. Only the parent has the handler.
  2. Click the child. The event starts on the child, then bubbles.
  3. target. The child — where the event was dispatched.
  4. currentTarget. The parent — where this listener is attached.

Example 3 — Event Delegation

MDN pattern: one parent listener; use closest to find the clicked item.

JavaScript
const list = document.getElementById("list");

list.addEventListener("click", (event) => {
  const item = event.target.closest("button");
  if (!item || !list.contains(item)) return;
  console.log(item.dataset.item); // "A", "B", or "C"
});
Try It Yourself

How It Works

  1. One listener. The parent list handles every child click.
  2. Start from target. event.target may be the button (or something inside it).
  3. Walk up. closest("button") finds the intended item.
  4. Act once. Log data-item — same idea as MDN’s list demo without per-child listeners.
Compatibility

Browser Support

Event.target is marked Baseline Widely available on MDN (since July 2015). It is also available in Web Workers.

✓ Baseline · Widely available

Event.target

Read-only EventTarget: the object onto which the event was dispatched. Supported across modern browsers and legacy IE.

100% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
Event.target Excellent

Bottom line: Safe to use everywhere. Prefer event.target for the origin and event.currentTarget for the listener host. Use closest for clean event delegation.

Frequently Asked Questions

It is a read-only property on an Event. It references the EventTarget onto which the event was dispatched—for a click, usually the element that was clicked.
No. MDN marks Event.target as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. It is also available in Web Workers.
target is where the event originated (the dispatch target). currentTarget is the element whose listener is running right now. They differ during bubbling or capturing when a parent listens for a child event.
You attach one listener to a parent and use event.target (often with closest) to find which child was interacted with. MDN’s list example uses evt.target to act on the clicked li.
event.srcElement is a deprecated alias for event.target. Always write event.target in new code.
Sometimes engines retarget clicks over text to the parent element. Prefer event.target for portable code; Mozilla-only fields like originalTarget are non-standard.

Next: timeStamp

Learn when the event was created with event.timeStamp.

timeStamp tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

JavaScript Event srcElement Property JavaScript Event timeStamp Property