Event Bubbling & Capturing

element.addEventListener('click', e => {
  e.stopPropagation();
  e.stopImmediatePropagation();
});

They do the same thing
stopPropagation stops bubbling, stopImmediatePropagation stops both bubbling and other listeners
While both methods prevent event propagation, they differ in scope: stopPropagation() prevents the event from bubbling up to parent elements but allows other event listeners on the same element to execute. stopImmediatePropagation() is more aggressive - it prevents both event bubbling AND stops other listeners on the same element from executing, even if they were attached before the current listener. This is particularly useful when you need to ensure no other handlers interfere with your event handling.
stopPropagation is deprecated, stopImmediatePropagation is modern
stopPropagation stops capturing, stopImmediatePropagation stops bubbling