Component Event Propagation in Salesforce - A Short Guide

The framework supports capturing and bubbling phases for component event propagation. These stages mimic the DOM processing pattern and give interested components a way to interact with the event, potentially controlling the behaviour of subsequent handlers. 

The component that raises the event is called the source component. The framework allows us to handle events in different phases. These stages give you the flexibility to decide how best to handle your application's events. 

The phases are: 

Capture

Events are captured and leaked from the application root to the source component. Events can be handled by components in the containment hierarchy that receives the captured event. 

Event handlers are called from the application root, in the order of the source component that raised the event.

Handlers registered in this phase can stop propagating events. After that, the handler is never called in this phase or the bubbling phase. 

Don't forget to check out: Introduction to Salesforce Aura Components Development

Bubble

The component that raised the event can handle it. The event then bubbles up from the source component to the application root. This event can be handled by any component in the containment hierarchy that receives the bubbling event.

Event handlers are called in order from the source component that raised the event to the application root.

Handlers registered in this phase can stop forwarding events. After that, no more handlers will be called during this phase. 

Here is the sequence of component event propagation. 

1. Event fired—A component event’s fired. 
2. Capture phase— The framework runs the capture phase from the application root to the source component until all components have been traversed. Each handled event can stop propagating by calling stopPropagation() on the event. 
3. Bubble phase— The framework executes the bubbling phase from the source component to the application root until all components have been iterated or stopPropagation() is called.