Event Bubbling & Capturing

parent.addEventListener('click', function(e) {
  if (e.target !== e.currentTarget) return;
  console.log('Parent clicked directly');
});

If the event is bubbling
If the event should be cancelled
If the click occurred on a child element
The condition 'e.target !== e.currentTarget' checks whether the click occurred on a child element rather than directly on the element where the listener is attached. When they're not equal, it means the event originated from a child element and bubbled up. This pattern is useful when you want to handle events only when an element is clicked directly, ignoring clicks on its children. It's a common pattern in modal dialogs where clicking the backdrop should close the modal, but clicking the modal content should not.
If the element has other listeners