Event Propagation Rules

Event Propagation Rules:

A) Let us start with event propagation rules for component event:

Component Events are the events that are fired by the child components and handled by the parent component.

As we can see in the above figure we are taking Four component to understand the event propagation rules for component event.


MiddleComp is the immediate parent of BottomComp and TopComp is the immediate parent of MiddleComp and MiddleComp2.


Component event propagation have two phases.

1)Bubble phase
2)Capture phase


In the below example we are  firing event from BottomComp and handling it in MiddleComp, MiddlleComp2 and TopComp so let us see the behavior.

Case 1) Bubble phase ( If we do not specify any phase it is considered as bubble phase)

Note: Movement of the bubble phase is from bottom to top.


BottomComp.cmp


<aura:component >
    <aura:registerEvent name="propagationEvent" type="c:CompEventforpropagation"/>
    <lightning:button label="Start Event propagation" onclick="{!c.executeEvent}"/>
 
</aura:component>


BottomCompcontroller.js

({
executeEvent : function(component, event, helper) {
        var cmpEvt=component.getEvent("propagationEvent");
        cmpEvt.fire();

}
})


MiddleComp.cmp

<aura:component >
    <c:BottomComp/>
    <aura:handler name="propagationEvent" event="c:CompEventforpropagation" action="{!c.doHandleinMiddle}"/>
</aura:component>


MiddleCompcontroller.js

({
doHandleinMiddle : function(component, event, helper) {
alert('From Middle component controller');
}
})


MiddleComp2.cmp

<aura:component >

    <aura:handler name="propagationEvent" event="c:CompEventforpropagation" action="{!c.doHandleinMiddle}"/>

</aura:component>


MiddleComp2controller.js


({

 doHandleinMiddle : function(component, event, helper) {

  alert('From Middle component2 controller');

 }

})


TopComp.cmp

<aura:component >
    <c:MiddleComp/>
     <c:MiddleComp2/>
<aura:handler name="propagationEvent" event="c:CompEventforpropagation" action="{!c.doHandleinTop}"/>
</aura:component>


TopCompcontroller.js

({
doHandleinTop : function(component, event, helper) {
alert('From top component controller');
}
})


EVENT:

<aura:event type="COMPONENT" description="Event template">

</aura:event>


Application:

<aura:application extends="force:slds" >
    <c:TopComp/>
</aura:application>


OUTPUT:

From Middle component controller
From top component controller


So from the above example we can understand that MiddleComp2 is not able to handle the event fired from BottomComp, this is because component event can only be handle by parent component and in our case MiddleComp is the immediate parent of  BottomComp and TopComp is the immediate parent of MiddleComp.

Case 2) CAPTURE PHASE (If we want the event to be handle by TopComp first than put phase="capture" in TopComp).

Note: Movement of the capture phase is from top to bottom.

TopComp.cmp:

<aura:component >
    <c:MiddleComp/>
    <c:MiddleComp2/>
<aura:handler name="propagationEvent" event="c:CompEventforpropagation" action="{!c.doHandleinTop}" phase="capture"/>

</aura:component>


OUTPUT:

From top component controller
From Middle component controller

Let us see some more cases for component events propagation.

Case a) If we put phase="capture" in both TopComp and MiddleComp the behavior will be same as that of Case 2 i.e movement will be from top to bottom.

OUTPUT:

From top component controller
From Middle component controller

Case b) Capture phase in TopComp and Bubble phase in MiddleComp.

Behavior will be same as that of Case 2.

OUTPUT:

From top component controller (Capture first)
From Middle component controller (Bubble second)

Case c) Bubble phase in TopComp and No phase in MiddleComp.

No phase means bubble phase in case of component event.

OUTPUT:

From Middle component controller
From top component controller

Case d) Bubble phase in MiddleComp and No phase in TopComp.

OUTPUT:

From Middle component controller
From top component controller

Case e) Bubble phase in TopComp and Bubble phase in MiddleComp.

From Middle component controller
From top component controller


Important point to remember for component events:

1) Bubble phase will always moves from bottom to top.

2) Capture phase will move from top to bottom

3) The component which fires the event can also handle the event.



So the final sequence for Component Events propagation is as:

1) Event fired
2) Capture phase
3) Bubble phase

B) Let us start with event propagation rules for application event:

Bubble phase and Capture phase are similar to that we have in component event, in addition we have default phase as well for application event.

Updating soon...