JavaScript Event currentTarget Property

What You’ll Learn

The currentTarget property is a read-only EventTarget that identifies the object your event handler is attached to. Learn how it differs from event.target, why it is null outside a handler, and how it powers event delegation—with five examples and try-it labs.

Introduction

When you click a nested element, the event may bubble up to a parent that owns the listener. event.target is the nested element that was clicked. event.currentTarget is the parent that has the handler.

That difference is the heart of event delegation: one listener on a parent, many possible children as target, one stable currentTarget.

Understanding Event.currentTarget

An instance property that answers: “Which object is running this listener right now?”

• Value — an EventTarget (often an Element) the handler is attached to.
• Read-only — you do not assign to it.
• During the handler — set to that attached target.
• Outside the handler — null (MDN).
• Baseline Widely available on MDN (since July 2015); also in Web Workers.

📝 Syntax

event.currentTarget

Value

An EventTarget representing the object to which the current event handler is attached.

Typical read inside a listener

parent.addEventListener("click", (event) => {
  console.log(event.currentTarget); // the parent
  console.log(event.target);        // parent or a child
});

⚖️ currentTarget vs Related Ideas

⚠️ Why currentTarget Becomes null

After the handler finishes, the browser clears currentTarget. Saving the event object does not keep a lasting reference to the attached element via this property.

let saved;

button.addEventListener("click", (event) => {
  saved = event;
  console.log(event.currentTarget); // the button
});

// Later (outside the handler):
console.log(saved.currentTarget); // null

If you need the element later, store event.currentTarget (or its id) in your own variable while still inside the handler.

Examples Gallery

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

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}`;
});

Current target: parent
Target: child

button.addEventListener("click", (event) => {
  console.log(event.currentTarget === event.target); // true
});

true

let saved = null;

button.addEventListener("click", (event) => {
  saved = event;
  console.log("inside:", event.currentTarget && event.currentTarget.id);
  setTimeout(() => {
    console.log("later:", saved.currentTarget); // null
  }, 0);
});

inside: btn
later: null

list.addEventListener("click", (event) => {
  const item = event.target.closest("li");
  if (!item || !event.currentTarget.contains(item)) return;

  console.log("list id:", event.currentTarget.id);
  console.log("item text:", item.textContent);
});

list id: list
item text: Banana

button.addEventListener("click", function (event) {
  console.log(this === event.currentTarget); // true
});

button.addEventListener("click", (event) => {
  console.log(this === event.currentTarget); // usually false
  console.log(event.currentTarget.id);       // reliable
});

true
(use event.currentTarget in arrow handlers)

🚀 Common Use Cases

• Event delegation on lists, tables, and toolbars.
• Reading attributes / dataset from the element that owns the listener.
• Comparing origin (target) vs listener host (currentTarget) while debugging.
• Arrow-function handlers where this is not the element.
• Teaching bubbling with a clear parent/child demo.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Available in Web Workers.
• Only reliable inside the active event handler.
• Related learning: bubbles, composed, addEventListener(), Event(), JavaScript hub.

💡 Best Practices