The DOM Event Model

· 1 min read · 82 Words · -Views -Comments

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

done

JavaScript DOM
Authors
Developer, digital product enthusiast, tinkerer, sharer, open source lover

Related