Event Propagation – Capturing, Bubbling & `stopPropagation`

When an event occurs it travels through three phases:

1. Capturing – from the window down to the target.
2. At target – the event reaches the target element.
3. Bubbling – back up from the target to window.

You can control the phase with the third argument of addEventListener:

element.addEventListener('click', handler, true); // capture

Use e.stopPropagation() to halt further propagation, or e.stopImmediatePropagation() to also stop other listeners on the same element.

Example: Stop bubbling

div.addEventListener('click', e => {
  e.stopPropagation();
  console.log('Div clicked – event will not reach body');
});