JavaScript Event target Property

What You’ll Learn

The target property is a read-only reference to the EventTarget the event was dispatched onto—for a click, usually the element that was clicked. Learn how it differs from currentTarget, how event delegation works, and MDN’s list demo—with five examples and try-it labs.

Introduction

When you click a button, your handler needs to know which element was involved. event.target answers that: it is the object the event was dispatched to.

If the listener is on a parent (bubbling), event.currentTarget is the parent while event.target is still the child that was clicked. That difference powers event delegation—one listener for many children.

Understanding Event.target

An instance property that references the object onto which the event was dispatched.

• Value — the associated EventTarget.
• Read-only — the browser sets it during dispatch.
• Different from currentTarget — during bubble/capture, the listener host may not be the origin.
• Delegation — listen on a parent; inspect target (often with closest).
• Baseline Widely available on MDN (since July 2015); also in Web Workers.

📝 Syntax

event.target

Value

The associated EventTarget.

Typical pattern

button.addEventListener("click", (event) => {
  console.log(event.target);           // the clicked element
  console.log(event.target.nodeName);  // e.g. "BUTTON"
});

⚖️ target vs Related Ideas

Examples Gallery

Examples follow MDN Event: target. Use View Output or Try It Yourself.

button.addEventListener("click", (event) => {
  console.log(event.target.nodeName); // "BUTTON"
  console.log(event.target.id);       // e.g. "save"
});

BUTTON
save

parent.addEventListener("click", (event) => {
  console.log("target:", event.target.id);
  console.log("currentTarget:", event.currentTarget.id);
});

target: child
currentTarget: parent

function hide(evt) {
  // evt.target = clicked 

  // evt.currentTarget = parent 

  evt.target.style.visibility = "hidden";
}

ul.addEventListener("click", hide);

(clicked list item becomes hidden)

list.addEventListener("click", (event) => {
  const item = event.target.closest("li");
  if (!item || !list.contains(item)) return;
  out.textContent = "Clicked: " + item.textContent.trim();
});

Clicked: Item B

toolbar.addEventListener("click", (event) => {
  const el = event.target;
  if (!(el instanceof Element) || !el.matches("button[data-action]")) {
    return;
  }
  out.textContent = "Action: " + el.dataset.action;
});

Action: save

🚀 Common Use Cases

• Identifying which button / link / row was activated.
• Event delegation on lists, tables, and toolbars.
• Comparing origin vs listener host while debugging bubble bugs.
• Building one handler for dynamically added children.
• Teaching the standard replacement for deprecated srcElement.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Available in Web Workers.
• Read-only—do not assign event.target = ….
• Prefer target over deprecated srcElement.
• Related learning: currentTarget, srcElement, eventPhase, bubbles, JavaScript hub.

💡 Best Practices