target vs currentTarget

What is the difference between target and currentTarget properties?

by yazgul

HTML

<div id="parent">
  <button id="child">Click me</button>
</div>

CSS

#parent {
  width: 200px;
  height: 100px;
  background: #ff0000;
}

JavaScript

const parent = document.querySelector('#parent');
const child = document.querySelector('#child');

function clickHandler(event) {
  console.log('target:', event.target.id);
  console.log('currentTarget:', event.currentTarget.id);
}
parent.addEventListener('click', clickHandler);