Do you know the difference between event.target and event.currentTarget?

event.target and event.currentTarget are properties of the event object in JavaScript that often cause confusion.

• event.target is the element on which the event occurred, i.e., the deepest element that the user interacted with.
• event.currentTarget is the element on which the event handler is currently invoked (the element to which the listener is attached).

Example:

<div id="parent">
  <button id="child">Click me</button>
</div>
<script>
  const parent = document.getElementById('parent');
  parent.addEventListener('click', (event) => {
    console.log('target:', event.target.id);        // element that was clicked
    console.log('currentTarget:', event.currentTarget.id); // element with the event listener
  });
</script>

If you click the button, event.target will be child, and event.currentTarget will be parent. This is important for event delegation and proper interaction handling.