What are event bubbling and capturing? How to cancel bubbling?

Bubbling and capturing are two phases of event propagation in the DOM.

• Capturing — the event first travels from the root of the document down to the target element.
• Bubbling — after reaching the target element, the event bubbles back up the DOM hierarchy to the root.

By default, event handlers are triggered during the bubbling phase.

To stop the event from bubbling up and prevent further propagation, the method event.stopPropagation() is used.

Example:

button.addEventListener('click', function(event) {
  event.stopPropagation(); // Stops the event from bubbling
  console.log('Button clicked');
});