What is the difference between event capturing and event bubbling in the DOM?

Direct answer

Capturing travels from ancestors toward the target before target handling, while bubbling travels from the target back through ancestors; most event listeners participate in the bubbling phase by default.

DOM event dispatch has propagation phases. For a click on a nested button, ancestors can observe the event on the way toward the target during capture and again on the way outward during bubbling if listeners were registered for those phases.

Register a capture listener with addEventListener('click', handler, {capture:true}) (or the boolean capture form).
Default listeners generally observe the target/bubbling path.
Not every event type bubbles, so event-delegation strategies must account for the actual event being used.
Propagation order is separate from the browser’s default action, such as following a link or submitting a form.

Capturing can be useful for interception/observation high in a tree; bubbling is the foundation of common event-delegation patterns.