Hiprup

What is event.target vs event.currentTarget?

Both reference elements during an event, but different ones.

  • event.target — the element that actually triggered the event (where it originated).

  • event.currentTarget — the element the listener is attached to (the same throughout that handler).

Heart of delegation: the listener sits on the parent (currentTarget), while target tells you which child was clicked.

// <ul id="list">
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
// </ul>

document.getElementById('list').addEventListener('click', (e) => {
  console.log('target:', e.target.tagName);        // LI (what was clicked)
  console.log('currentTarget:', e.currentTarget.tagName); // UL (where listener is)
  
  // Useful for delegation
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('selected');
  }
});

// Direct handler (target === currentTarget)
document.getElementById('btn').addEventListener('click', (e) => {
  console.log(e.target === e.currentTarget); // true (clicked element = handler element)
});

Clicking an LI: target is the LI (origin of click), currentTarget is the UL (where the listener is attached). This distinction enables event delegation — one listener on the parent handles all children.

When clicked directly (no delegation), target and currentTarget are the same element.

target = what was clicked (origin). currentTarget = where the listener is (handler). They differ with event delegation (parent listener, child click).

They are the same when the handler is directly on the clicked element. This is essential for understanding event delegation.

What is event.target vs event.currentTarget? | Hiprup