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]
Application Event has one more phase called “Default” phase
3. Default Phase: It respects framework’s default handling behavior.
Source Component [Where event is triggered] – button
Application Root – Window
confused? Let’s start to discuss in detail
Before going to discuss, we need to understand the basic ideas about the component creation.
- Declarative Component: A component which is referred from outermost component which is the owner of the Containment Hierarchy.
- Programmatic Component: A Component is invoked from the component by $A.createComponent() in js file.
- 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.
- 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.
Application Event – It propagates to every owner in the hierarchy.
Default: Default Phase: If components are disconnected and want to communicate between the components, you have to use the Application Event. At that point, event phase should be default phase. All component will catch the application event in same time. In this case, we can not use the bubble phase or capture phase.
If the components are connected and if we use Application Event, then we can use Bubble or Capture phase.
Disconnected Components
Component 1, Component 2, Component 3 and Component 4 are disconnected. Component 4 has the button named “Check Default Phase” by which the Application Event is registered and transmitted. Due to default behavior of handling components or default phase, all components or receivers will catch the event at same time. You can check the Graphical View image.
Hence, the result would be
I am the Receiver 1
I am the Receiver 2
I am the Receiver 3
In this component structure, you can not use the event Bubble Phase or Capture Phase.
Connected Components with Application Event Bubble Phase
In this component structure, three types of phases are allowed such as Default Phase, Bubble Phase and Capture Phase, because now these components are connected. Now, we will discuss about Bubble Phase.
To run the Bubble Phase you have to mention phase= “bubble” in aura:handler tag of Component 1, Component 2 as well as Component 3. Just like
<aura:handler event="c:applicationEvent" action="{!c.checkResponse}" phase="bubble"/>
Due to Bubble Phase, application event will propagate from bottom to top or from Source Component[button] to root component[Component 1]. Component 3 and Component 1 will catch the event as they are the owner of containment hierarchy. Component 2 is not the owner of Containment Hierarchy, so it will not be able to do cat ch the event as well as not able to print the message.
Hence, the result would be
I am the Grand Child Component
I am the Parent Component
Connected Components with Application Event 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 event="c:applicationEvent" action="{!c.checkResponse}" phase="capture"/>
Due to Capture Phase, application event will propagate from top to bottom or from root component[Component 1] to Source Component[button]. Component 1 and Component 3 will catch the event as they are the owner of containment hierarchy. Component 2 is not the owner of Containment Hierarchy, so it will not be able to do cat ch the event as well as not able to print the message.
Hence, the result would be
I am the Parent Component
I am the Grand Child Component
You can check the Component Event Propagation about detailing of Capture and Bubble Phase
Sample Code Snippet for Disconnected Components with Default Phase
component 1 [Receiver 1]
<aura:component>
<aura:handler event="c:applicationEvent" action="{!c.checkResponse}"/>
</aura:component>
component 2 [Receiver 2]
<aura:component>
<aura:handler event="c:applicationEvent" action="{!c.checkResponse}"/>
</aura:component>
component 3 [Receiver 3]
<aura:component>
<aura:handler event="c:applicationEvent" action="{!c.checkResponse}"/>
</aura:component>
component 4 [button is here]
<aura:component>
<aura:registerEvent name="applicationEvent" type="c:applicationEvent"/>
<lightning: button label="Check Default Phase" action="{!c.fireEvent}"/>
</aura:component>
LearningLightning.app | All components will be run from this application
<aura:component> <c:component 1/> <c:component 2/> <c:component 3/> <c:component 4/> </aura:component>
Component 1, Component 2, Component 3 and Component 4 are disconnected. Component 4 has the button named “Check Default Phase” by which the Application Event is registered and transmitted. Due to default behavior of handling components or default phase, all components or receivers will catch the event at same time.
Hence, the result would be
I am the Receiver 1
I am the Receiver 2
I am the Receiver 3
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 connected 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 in the Connected Components]
<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
Q. If you want to print all the messages from all the disconnected components, what will you do?
Nothing to do. By default, all the messages will be printed from all the disconnected components due to “Default” phase behavior inclusion of Application Event.
Best Practice: If components are connected, use Component Event instead of Application Event. If components are disconnected, you should use the Application Event.
Thank you for concentrating a long time session
10,924 total views, 9 views today