Creating elements with JavaScript only gets you halfway to an interactive page. The other half is listening: deciding which user or browser actions your code should react to, and writing the functions that run when those actions occur. The modern way to do this is addEventListener, a method available on every DOM node (and on window and document) that connects an event type such as click, input, keydown, submit, or scroll to a handler function.
Along the way you will meet the event object that the browser passes into every handler. It carries details like event.target (the element that actually triggered the event), event.currentTarget (the element the listener is attached to), event.type, key and pointer information, and methods such as preventDefault() and stopPropagation(). You will also learn that events travel through the DOM tree in two phases — capturing down from the root, then bubbling back up — and that the third argument to addEventListener (true/false, or an options object with capture, once, and passive) lets you control that behavior. Because listeners can accumulate and leak, removeEventListener and the once option matter for clean code.
The payoff for this module is event delegation: instead of attaching a listener to every button in a list you build dynamically, you attach one listener to a stable parent and use event.target to figure out what was clicked. As you watch the videos below, pay attention to three things: the exact syntax of addEventListener and its options, how the speaker uses the event object to identify the source of an event, and why bubbling is what makes delegation possible at all.
An episode from a full JavaScript course dedicated to event delegation: attaching a single listener to a parent element and using the event object to determine which child was actually interacted with. The description links to starter and final code on GitHub, so you can follow along and compare your work to the finished version. Expect practical examples involving lists or repeated elements where attaching individual listeners would be wasteful.
It is the most directly on-target video for the delegation subtopic, it is long enough to show real code rather than a definition, and the provided starter code lets you practice the pattern you will need for dynamically generated elements.
A short, focused walkthrough of listening to events in JavaScript with addEventListener, part of a series on interacting with the DOM. Based on its title and description, it demonstrates selecting an element, attaching a handler for an event such as click, and seeing the handler run in the browser. Expect a quick introduction to the basic syntax and the callback function pattern.
At just over three minutes, it is an efficient starting point that establishes the addEventListener syntax before you move on to propagation and delegation, and it sits inside a broader DOM-interaction series that matches this module.
This video explains event propagation in JavaScript, covering the bubbling phase in which an event travels from the target element up through its ancestors, and the capturing phase in which it travels downward first. Expect demonstrations of nested elements with listeners on each level so you can observe the order in which handlers fire, and discussion of how the capture setting changes that order.
Propagation is the concept that ties together the capture option, stopPropagation, and delegation, and this concise lesson treats it directly as its own topic rather than as a side note.
Together these videos build the event-handling half of the module. The addEventListener walkthrough gives you the core syntax and the handler-function pattern; the propagation video explains bubbling and capturing, which underpins the capture option, stopPropagation, and the behavior of listeners on nested elements; and the delegation episode shows the pattern you need when elements are created at runtime. That progression supports MO4 directly, and it supplies the interaction layer for MO5, where you combine element creation and modification (MO1–MO3) with event handling to build a reusable interactive control. Supplement your viewing with the MDN documentation for addEventListener and removeEventListener to confirm the details of the once and passive options and of removing listeners correctly.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.