Understanding:
Event propagation rules determine which components in the containment hierarchy can handle events by default in the bubble or capture phase. Learn about the rules and how to handle events in the bubble or capture phase.
The framework supports capture and bubble phases for the propagation of component events. These phases are similar to DOM handling patterns and provide an opportunity for interested components to interact with an event and potentially control the behavior for subsequent handlers. The capture phase executes before the bubble phase.
For example, consider the following component hierarchy:
Bubble Phase (Default):
The source component, which is the innermost component fires the event. Now when the event is generated, it travels up its hierarchy until it reaches the outermost component which is also the owner of the component. This is called bubbling. The handlers specified on each component are fired in this order i.e. from source to the owner. This phase where the event is handled from innermost to the outermost component is called the bubble phase.It is also the default phase in lightning.
Capture Phase:
Now when a component handler is fired from the outermost component to the innermost component i.e. the owner component handler first, then the container handler and so on until it reaches the source component,which actually triggered the event, this phase is called capture phase. To specify the capture phase we add “phase” attribute to the handler and put the value as “capture”. Capture phase is rarely used , but it can prove helpful in some situation where we want to control the execution order from outermost to innermost component.
Consider the following code snippet:
Output:
Capture phase
Bubble phase
When both handlers are specified for bubble and capture phase
