Your Ultimate Guide to Understanding DOM Events

Listening to and responding to events is a foundational skill for building software for the web. The Document Object Model, or DOM for short, has a powerful built-in event system. And yet, many of us have a pretty basic understanding of the DOM event system and only scratch the surface of the available power.
This lack of understanding leads to bugs in our applications and writing lots of code to work around the DOM event system rather than leveraging it. The goal of the course is that you will walk away with the confidence to successfully and meaningfully engage with the DOM event system.
Whether you are just starting out with frontend engineering or you are a seasoned veteran, this course will provide a strong understanding of how the DOM Event system works and how to leverage it successfully.
The DOM Event Visualizer
The DOM event visualizer domevents.dev will be used to explain many behaviors throughout the course. You are welcome to play with the visualizer yourself to continue your learning.

• Introduction to the DOM Events Course
• High-Level DOM Events Concepts
• Listen to Events using HTML Attribute Event Handlers
• Listen to Events using Object Property Event Handlers
• Understand the Relationship Between HTML Attribute and Object Property Event Handlers
• Add an Event Listener with addEventListener
• Remove an Event Listener with removeEventListener
• Choose an Event Listener Mechanism
• The Execution Order of Event Listeners
• The Execution Order of Event Listeners in the Target Phase
• The Event Object
• Log Events to the Console
• Cancel Events
• Cancel Bespoke Events
• Stop Events
• The Event Delegation Pattern
• Create and Dispatch Synthetic Events
• Deprecated Event Creation Mechanisms
• Events are Dispatched Synchronously
• Add and Remove Event Listeners while an Event is Dispatching
• DOM Events and the Event Loop
• DOM Events and Microtasks
• Improve Scroll Performance with Passive Event Listeners
• Default Passive Values on the Body Element
• Synchronous and Asynchronous Events (Ordered and Unordered Events)
• Window Reflecting Body Element Event Handlers
• Debug and Inspect Event Listeners with Chrome Developer Tools
• Debug Event Listener Performance with Chrome Developer Tools