event.target vs event.currentTarget

In a nutshell

event.target refers to the element that triggered the event (usually the innermost element).

event.currentTarget refers to the element to which the event handler was attached.

For example, if an event registered on a <div> element bubbles up from a nested <button> element, the event.target will be <button> whilst the event.currentTarget will be <div>.

<div>
  <button>Red</button>
  <button>Blue</button>
  <button>Green</button>
</div>

const divEl = document.querySelector('div')

divEl.addEventListener('click', (event) => {
  console.log('event.target', event.target)
  console.log('event.currentTarget', event.currentTarget)
})

In the above example, clicking on the div, will show the following in the console:

See CodeSandbox for example.