DOM Events
About
This module is designed for learners at an intermediate level, offering an in-depth exploration of how JavaScript interacts with the Document Object Model (DOM) to create dynamic and responsive web pages. In this module, you’ll learn about different event types, how to handle them, and best practices for implementing event listeners.
Events are the backbone of interactive web applications, allowing users to engage directly with webpage elements. Whether it’s clicking a button, submitting a form, or hovering over an element, each action triggers specific events that JavaScript code can respond to.
Content
| Lesson | Video Time | Video | Skills |
|---|---|---|---|
| Setup | 5 min | Link | Setting up the development environment. |
| Concepts | 3 min | Link | Understanding DOM events and their role in web page interactivity. |
| Fundamentals | 6 min | Link | Compose event listeners with appropriate syntax. |
| Responding to Events | 20 min | Link | Create in-memory elements and add them to the DOM. |
| Named Callbacks | 9 min | Link | Use named callback functions to make event handlers. |
The event Object |
14 min | Link | Use the event object to allow multiple elements to share one named callback function. |
| Total content | 57 min |
Level Up content
| Lesson | Video Time | Video | Skills |
|---|---|---|---|
| Event Bubbling | 11 min | Link | Event bubbling and event delegation. |
| Removing Event Listeners | 5 min | Link | Removing a set event listener. |
| Alternate Event Listener Techniques | 4 min | Link | .onclick() and inline listeners. |
| Total Level Up content | 20 min |