Your Ultimate Guide to Understanding DOM Events
|
Learn how to effectively engage with the DOM event system in this comprehensive course. From basic concepts to advanced techniques, gain the confidence to leverage the power of DOM events. Suitable for beginners and experienced developers alike. Improve your frontend engineering skills today.
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
will be used to explain many behaviors throughout the course. You are welcome to play with the visualizer yourself to continue your learning.
Course Content
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
User Reviews
Be the first to review “Your Ultimate Guide to Understanding DOM Events”
You must be logged in to post a review.
There are no reviews yet.