Salesforce Learning Hub: Bubble Phase and Capture Phase in Lightning Component Event

In this article we are going to understand two phases of lightning component event propagation. We will discuss the difference between both of them with real example.

Bubble phase and capture phase are available in component event in which event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event.

Bubble Phase:

In bubble phase the component that fired the event can handle it. The event then propagates from source event who fired the event to the application root which is top in the hierarchy, handlers of the components will invoke from bottom to top. It is the default phase if didn't mentioned.

Capture Phase:

In bubble phase the event is captured and trickles down from application root which is top in hierarchy to the source component, handlers of the components will invoke from bottom to top.

Syntax for defining the phase:

<aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEvent}" phase="capture"/>

Let's see the real example to understand the flow of events in both the phase

cmpEvent.evt

<aura:event type="COMPONENT">
    <aura:attribute name="message" type="String"/>
</aura:event>

GrandParentCmp.cmp

<aura:component >
     <!--Bubble Phase-->
	<aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEventInGrandParent}"/>-->
    <!--Capture Phase
    <aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEventInGrandParent}" phase="capture"/>
	-->
    <c:ParentCmp/>
</aura:component>

GrandParentCmp.js

({
	handleCmpEventInGrandParent : function(component, event, helper) {
		var message = event.getParam("message");
        console.log('Event captured in GrandParent with message '+message);
	}
})

ParentCmp.cmp

<aura:component >
    <!--Bubble Phase-->
	<aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEventInParent}"/> -->
     <!--Capture Phase
    <aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEventInParent}" phase="capture"/>
	-->
    <c:ChildCmp/>
</aura:component>

ParentCmp.js

({
	handleCmpEventInParent : function(component, event, helper) {
		var message = event.getParam("message");
        console.log('Event captured in Parent with message:'+message);
	}
})

ChildCmp.cmp

<aura:component >
	<aura:registerEvent name="cmpEvent" type="c:cmpEvent"/>
    <h1>Simple Component Event Sample</h1>
 <p><lightning:button label="Click here to fire a component event"
        onclick="{!c.fireComponentEvent}" />
 </p>
</aura:component>

ChildCmp.js

({
	fireComponentEvent : function(cmp, event) {
        var cmpEvent = cmp.getEvent("cmpEvent");
        cmpEvent.setParams({
            "message" : "A component event fired"});
        cmpEvent.fire();
    }
})

Output Of Bubble Phase: