Sunday, May 26, 2019

Event Propagation Rules

Event Propagation Rules:


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



Event Propagation Rules

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

Middle comp is the immediate parent of Bottom comp and Top comp is the immediate parent of Middle comp.

So basically there are two phase in component event propogation.
1)Bubble phase
2)Capture phase

In the below example we are firing event from bottom component and handling it in middle and top component. 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");
        alert('From bottom component controller');
        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');
}
})

TopComp.cmp

<aura:component >
    <c:MiddleComp/>
<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 bottom component controller
From Middle component controller
From top component controller

VIDEO:


Conclusion for Bubble phase behavior:

Traversing from bottom to top.

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

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

TopComp.cmp:

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

</aura:component>

OUTPUT:

From bottom component controller
From top component controller
From Middle component controller

VIDEO:



Let us see some more cases with component events.

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


OUTPUT:

From bottom component controller
From top component controller
From Middle component controller

Case b) : Capture phase in Top comp and Bubble phase in Middle comp.


Behavior will be same as that of Case 2.

OUTPUT:

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


Case c) : Bubble phase in Top comp and no phase in Middle comp.

No phase means bubble phase in case of component event.

OUTPUT:

From bottom component controller
From Middle component controller
From top component controller

Case d) : Bubble phase in Middle comp and no phase in Top comp.


OUTPUT:

From bottom component controller
From Middle component controller
From top component controller

Case e) : Bubble phase in Top comp and Bubble phase in Middle comp.


From bottom component controller
From Middle component controller
From top component controller


SUMMARY FOR COMPONENT EVENT:


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

2) Capture phase will move from top to bottom


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

Event Propagation Rules


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.


We will update this shortly........

No comments:

Post a Comment