JS MASTER CLASS /// EVENT BUBBLING /// CAPTURING /// DELEGATION /// JS MASTER CLASS /// EVENT BUBBLING /// CAPTURING /// DELEGATION ///

JavaScript Propagation

Master Event Bubbling, Capturing, and the power of Event Delegation.

propagation.js
1 / 12
12345
🌊

Tutor:When you interact with a web page, like clicking a button, the event doesn't just hit the button. It travels through the Document Object Model (DOM).


Skill Matrix

UNLOCK NODES BY MASTERING DOM EVENTS.

Concept: Bubbling

Events travel UP the DOM tree. Clicking a child also clicks the parent!

System Check

In which direction does event bubbling travel?

Community Holo-Net

Discuss DOM Events

ACTIVE

Have a tricky bug with event bubbling? Share it with the community.

Support Us

JavaScript Propagation & Delegation

Author

Pascual Vila

Frontend Instructor // Code Syllabus

In the DOM, events don't just happen to a single element. They flow through the document tree. Understanding this flow is crucial for writing performant, scalable JavaScript.

The 3 Phases of Event Flow

When an event occurs, it travels in three distinct phases:

  • 1. Capturing Phase: The event travels DOWN from the root document to the target element.
  • 2. Target Phase: The event reaches the exact element that was interacted with.
  • 3. Bubbling Phase: The event travels UP from the target element back to the root.

Event Bubbling & stopPropagation

Because of the Bubbling Phase, clicking a child element (like a button inside a div) will also trigger the click listener of the parent div. You can stop this upward journey by calling event.stopPropagation() on the event object.

Event Delegation

Instead of attaching 100 event listeners to 100 list items (which wastes memory), you can attach ONE listener to the parent <ul>. Thanks to bubbling, clicks on the list items will travel up to the parent listener.

"Use event.target to identify the specific child element that was clicked, and event.currentTarget to reference the parent element the listener is attached to."

DOM Events Glossary

Bubbling

The phase where an event travels UP from the target element to the document root.

snippet.js

Capturing

The phase where an event travels DOWN from the root to the target element.

snippet.js

event.stopPropagation()

Method used to stop an event from continuing its flow (bubbling or capturing) up or down the DOM.

snippet.js

event.target

The deepest, most specific element that originally triggered the event.

snippet.js

event.currentTarget

The element that the event listener is currently attached to.

snippet.js

Event Delegation

The technique of attaching a single event listener to a parent element to handle events for all its children.

snippet.js