What is event bubbling and capturing?

When an event occurs on a DOM element, it does not stop there — it travels through the DOM tree in three phases. Capture phase: the event travels from window down through ancestors to the target element. Target phase: the event reaches the target element. Bubble phase: the event bubbles back up from the target through ancestors to window. By default, addEventListener registers listeners in the bubble phase. Pass true as the third argument to register in the capture phase. Event delegation leverages bubbling — instead of adding a listener to every child element, add one listener to the parent and use event.target to identify which child was clicked. This is memory-efficient for dynamic lists: ul.addEventListener("click", e => { if (e.target.tagName === "LI") handleClick(e.target); }). stopPropagation() stops the event from traveling further.