Explain capturing, targeting, and bubbling in DOM event propagation.

Short Interview Answer

Events can descend from root to target (capture), hit the target, then ascend (bubble). Listeners choose phase via `addEventListener` options.

Detailed Explanation

By default most listeners run on the bubble phase. Setting `{ capture: true }` listens on the way down. `stopPropagation` prevents further phase travel; `stopImmediatePropagation` also blocks other listeners on the same node. `event.target` is the originating element; `event.currentTarget` is the element with the listener. Understanding phases is essential for delegation and overlay/modal click handling.

Example

parent.addEventListener('click', handler, true); // capture
child.addEventListener('click', handler); // bubble

Interview Tip

Draw the three phases quickly.

Common Mistake

Thinking `preventDefault` stops propagation — it cancels default action, not travel.