The DOM Event Model

I’ve been wiring up keyboard shortcuts lately and needed a quick refresher on DOM events.

Event Flow Visualization

JavaScript APIs

1. Binding events is straightforward. Use addEventListener, and pass the third argument to opt into the capture phase. For pure bubbling, handlers like onclick work too.
2. The event.stopPropagation() method halts propagation—whether the event is bubbling or capturing—exactly as the diagram shows.
3. event.preventDefault() doesn’t stop propagation, but it blocks default behaviors such as following a link when clicking an <a> tag.

References

• https://www.w3.org/TR/DOM-Level-3-Events/#event-flow

done