Event lifecycle playground
Click any ring (or the link) to dispatch a click through the DOM. The wavefront pulses each ancestor as the event passes through capture → target → bubble.
The link did its job
You clicked the link inside the inner ring. The browser's default click action — navigate to the URL fragment #js-dom-events-modal — ran, which made this modal appear (a CSS :target selector watches for that fragment in the URL).
Toggle preventDefaulton and click the link again. The fragment never updates, this modal never opens, and a small “Default prevented!” floater rises from your click point as visible confirmation that the browser's default was cancelled.
The event listeners on the rings still fire either way — the capture / target / bubble trace in the log doesn't care whether the default action was prevented. Only the browser's default behavior is suppressed by preventDefault().