illustration for Your Ultimate Guide to Understanding DOM Events
pro

Your Ultimate Guide to Understanding DOM Events

Instructor

Alex Reardon

2h 9m closed-captioning
·
28 lessons
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.8
155
people completed
Published 4 years ago
|
Updated 4 years ago

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.

The DOM event visualizer

What you'll learn:

  • What events are and how they flow through the DOM
  • How to listen and respond to events
  • The order in which event listeners are called
  • The information available to us in event objects
  • Cancelling events
  • Stopping events
  • Manually creating events
  • How events work with the Event Loop
  • Understanding synchronous and asynchronous events
  • Understanding passive events
  • Understanding the event delegation pattern
  • And how to debug and examine events in the browser

Learner Reviews

  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    very informative . not general knowledge

    Learner
    2 years ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    so thorough and complete, gives a good understanding

    Peter Olah
    2 years ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    That was amazing, thank you so much for clearing this up for me.

    Anton
    2 years ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Excellent course!!! I learned so much more about Javascript as a whole from this.

    Thank You!

    Learner
    2 years ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Overall the course was really great. I really mastered the DOM events system. Feeling more Confident and Powerful after taking this course. One thing that I want is about more explanation about passive events and use cases with real world examples. 10/10

    Learner
    2 years ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    DOMEvents discussed in depth without getting bogged down in details; Alex answered the questions I was having when listening.

    Marc
    3 years ago

Course Content

2h 9m • 28 lessons

    You might also like these resources:

    illustration for Debug the DOM in Chrome with the Devtools Elements Panel
    mykola bilokonsky・33m・Course

    We’ll take a deep look at the Elements panel in the chrome devtools. We’ll step through each button and tab on this panel and discuss how to use them to interact with your web app.

    illustration for Advanced JavaScript Foundations
    Tyler Clark・45m・Course

    You’ll be taking things to the next level, shining a light into “black-box” concepts like prototypes, the this keyword, and what primitive types are.

    illustration for Introduction to Client Side Web APIs
    Ian Jones・7m・Course

    Learn the basics of how to interact with the HTML Document Object Model through JavaScript.