Advanced Event Communication – Component Event Propagation

Event Propagation is a way of communication in your application.  Following are the phases supported in event communication

1. Capture Phase:  The event is captured from application root to the source component. [top to bottom].

2. Bubble Phase:  The event is bubbled up from source component to the application root. [bottom to top]

Source Component [Where event is triggered] – button

Application Root – Window

 

 

 

 

 

 

Before going to discuss, we need to understand the basic ideas about the component creation.

1. Declarative Component: A component which is referred from outermost component which is the owner of the Containment Hierarchy.
2. Programmatic Component:  A Component is invoked from the component by $A.createComponent() in js file.
3. Container: We will call the component as container where {!v.body} or Aura.Component[] attributes are declared, means containing other component, not referring other component.
4. Owner of Containment Hierarchy: A component which will create or refer to other component, not containing other component by {!v.body} tag or Aura.Component[] facet attribute. A component owner is  the component to responsible for creation of other component.

Component Event – It propagates to every owner in the hierarchy.

Default: Bubble Phase : Event will be passed from bottom to top means from source component to application root.

Component 1 is calling Component 2 which contains Component 3 and Component 3 is calling Component 4 where only the button “Check Bubble Phase” resides.  When you will click the button in Component 4, component event is registered in component 4[Source Component] and due to bubble phase[bottom to top] at first Component 3 will catch the event after that Component 1 will catch the event. But, Component 2 will not be able to catch the event because Component 2 is the container component and it is not the owner of the containment hierarchy means it is not exactly calling component 3, it is containing Component 3 in its body and also it is not the outermost component. Only Component 1[Parent Component] and  Component 3[Grand Child Component] are the owner of containment hierarchy, so they will be able to catch the component event and print the message.

Sequence of Events [When you will click the button “Check Bubble Phase“]

1. Component Event is registered in Component 4.  This event will pass from bottom to top, just like bubble.
2. Component 3 prints the message through its handler. Component 3 is the owner of Containment Hierarchy.
3. Component 2  has the handler of this event, but it is the container component and not the owner of Containment Hierarchy. So, It will not be able to catch the event.
4. Component 1 is the parent component and outer most component as well as owner of the Containment Hierarchy. Hence, it prints the message through its handler.

Hence, the result would be

I am the Grand Child Component
I am the Parent Component

Sample Code Snippet for understanding

component 1 [Parent Component]

<aura:component>
  <aura:handler name="componentEvent" event="c:componentEvent" action="{!c.checkResponse}"/>
  <c:component 2>
     <c:component 3>
  </c:component 2>
</aura:component>

component 2 [Child Component] | here {!v.body} is defined to contain the component 3

<aura:component>
  <aura:handler name="componentEvent" event="c:componentEvent" action="{!c.checkResponse}"/>
  {!v.body}
</aura:component>

component 3 [Grand Child Component]

<aura:component>
  <aura:handler name="componentEvent" event="c:componentEvent" action="{!c.checkResponse}"/>
  <c:component 4/>
</aura:component>

component 4 [button is here] | register the component event

<aura:component>
  <aura:registerEvent name="componentEvent" type="c:componentEvent"/>
  <lightning: button label="Check Bubble Phase" action="{!c.fireEvent}"/>
</aura:component>

Respective handlers for Component 1, Component 2 and Component 3 are the same as Component Event handler syntax.

Capture Phase: Event will be captured from top to bottom means from application root to source component.

We will take the same component structure to describe the Capture Phase.

 

 

To run the Capture Phase you have to mention phase=”capture” in  aura:handler tag of Component 1, Component 2 as well as Component 3. Just like

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

When you will click the button in Component 4, component event is registered in component 4[Source Component] and due to capture phase[top to bottom] at first Component 1 will catch the event after that Component 3 will catch the event. But, Component 2 will not be able to catch the event because of the same reason as Component 2 is the container component and it is not the owner of the containment hierarchy.

Sequence of Events [When you will click the button “Check Capture Phase“]

1. Component Event is registered in Component 4.  This event will be captured from top to bottom.
2. Component 1 prints the message through its handler. Component 1 is the owner of Containment Hierarchy.
3. Component 2  has the handler of this event, but it is the container component and not the owner of Containment Hierarchy. So, It will not be able to catch the event.
4. Component 3 is also owner of the Containment Hierarchy and will call the Component 4 to show the button “Check Capture Phase”. Hence, it prints the message through its handler.

Hence, the result would be

I am the Parent Component
I am the Grand Child Component

Asynchronous Code Execution: You can pause or resume the event by the respective methods event.pause() or event.resume() in js files. These tags are needed to take the decision based on user input and response from asynchronous code and for certain conditions, we have to pause the event and after satisfying the criteria, again we can resume the event. By this, we can manage the flow-control mechanism for asynchronous code.

Stop Event Propagation: You can stop the event propagation by the respective method event.stopPropagation().

Q. If you want to print all the messages from all the components, what will you do?

IncludeFacets in Container Component: If you want to catch the event through container component, you need to write the attribute as “includeFacets=true” in aura:handler tag of a container component. In our example, we have a container component as “Component 2”. If we will include the attribute as “includeFacets=true“, it will be able to handle the event and print the message.

component 2 [Child Component]

<aura:component>
  <aura:handler name="componentEvent" event="c:componentEvent" action="{!c.checkResponse}" includeFacets="true"/>
  {!v.body}
</aura:component>

Results in Bubble Phase using “includeFacets=true”  in Component 2

I am the Grand Child Component
I am the Child Component
I am the Parent Component

Results in Capture Phase using “includeFacets=true”  in Component 2

I am the Parent Component
I am the Child Component
I am the Grand Child Component

                                                               Thank you for concentrating a long time  session

3,761 total views, 1 views today