DOM Events

About DOM Events

DOM Events is an interactive learning site that explains the DOM event system through visual exploration. It covers core concepts including events, event targets, and the three phases of event flow: capture, target, and bubble.

The site details event listener configuration options (capture, passive, and once), along with listener effects such as preventDefault, stopPropagation, and stopImmediatePropagation. It explains how passive event listeners interact with the browser's event dispatching and cancellation behavior.

It includes an interactive diagram for dispatching and observing events across a simulated DOM tree (parent, child, and grandchild nodes), and links to external resources including MDN documentation, the DOM Living Standard, the HTML Living Standard, and the UI Events Working Draft. The site is created by Alex Reardon and also references a related video course.

Key features

• Interactive visualization of DOM event capture, target, and bubble phases
• Configurable event options: bubbles and cancelable
• Event listener options: capture, passive, and once
• Demonstrates listener effects: preventDefault, stopPropagation, and stopImmediatePropagation
• Explains passive event listeners and their deferred dispatch behavior

Frequently asked questions