What is the difference between e.target and e.currentTarget?

e.target vs e.currentTarget

Both are properties on the Event object, and they are easy to confuse when using event delegation.

Property	Points to
e.target	The element that originally fired the event (what the user actually clicked)
e.currentTarget	The element whose listener is currently running (where you attached the handler)

Example

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
</ul>

document.getElementById('list').addEventListener('click', (e) => {
  console.log('e.target:', e.target);              // <li>item 1</li>
  console.log('e.currentTarget:', e.currentTarget); // <ul id="list">
});

When the user clicks <li>item 1</li>:

• e.target → <li> (the element clicked)
• e.currentTarget → <ul> (the element with the listener)

When are they the same?

When the listener is attached directly to the element that was clicked:

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

Practical use in event delegation

document.getElementById('list').addEventListener('click', (e) => {
  // Use e.target to identify which child was clicked
  if (e.target.matches('li')) {
    console.log('Clicked li:', e.target.textContent);
  }
});

Note: this in regular functions

In a traditional function listener, this equals e.currentTarget. Arrow functions don't have their own this, so use e.currentTarget explicitly there.

Summary

• e.target = the event's origin (what the user interacted with)
• e.currentTarget = where the listener is attached (some ancestor in the bubble path)
• In event delegation, you almost always inspect e.target to determine which child triggered the event