Salesforce Lightning, known as the future of Salesforce, comprises the no. innovative tools and technologies that bring several upgrades for enhancing the Salesforce1 Platform. It consists of the Lightning Component Framework, which can be used to create reusable components, customize Salesforce1 applications, and build standalone applications.
Using an event-based approach, the framework facilitates communication with the various components. An event is a notification that makes an interested entity discover that something has happened and can now take the appropriate action.
The interested entity is defined as the components that you create in Salesforce Lightning. The components will register for the events they are interested in and trigger it if necessary. Additionally, there will be a component that handles start-up events when the component is fired. Application events and component events are the two types of Salesforce Lightning events that are used to communicate and transfer data between two components.
What Is Component Event Propagation?
Event propagation determines how you communicate in your application. The event propagation rules determine which components in the containment hierarchy can handle events in the bubble or capture phase. The framework supports capture and bubble phases for component event propagation. These phases are equivalent to DOM handling patterns and allow interested components to interact with an event and potentially control subsequent handlers’ behavior. The capture phase is carried out before the bubble phase.
The component hierarchy is as follows:
Introduction To Containment Hierarchy
It is a tree of components with a top-level container as its root. The user actions and events trigger the events resulting from actions and are different from application and component events. System events are also part of the containment hierarchy fired automatically by the framework during its life cycles, such as during component initialization, changing of an attribute value, and rendering. This movement of events is also known as propagation that determines the sequence in which the event can be processed. The innermost container is the first to handle events, while the top container is the last to handle events.It is a tree of components with a top-level container as its root.
The user actions and events trigger the events resulting from actions and are different from application and component events. System events are also part of the containment hierarchy fired automatically by the framework during its life cycles, such as during component initialization, changing of an attribute value, and rendering. This movement of events is also known as propagation that determines the sequence in which the event can be processed. The innermost container is the first to handle events, while the top container is the last to handle events.
Phases in Event Propagation
Event propagation phases define the sequence of events handled by the various containers. Depending on the type of phase, events can be handled starting from the innermost or outermost container. Frames allow you to process events in different phases. In these phases, you have the flexibility to decide how effectively you can handle the event for your application.
1. Capture Phase
Events are captured and flow from the application’s root directory to the source component. Components can process events that receive captured events in the containment hierarchy.
The event handlers are called in order from the application root to the source component that fired the event. In this phase, any registered handler can stop the event from propagating at the point where no more handlers are called.
2. Bubble Phase
The component that triggers the event can handle it. The event then emerges out from the source component to the root of the application. The event can be processed by a component in the containment hierarchy that receives bubble events.
Event handlers are called in order from the source component that fired the event up to the application root. In this phase too, any registered handler can stop the event from propagating at the point where no more handlers are called.
Here is the order in which the component events are propagated:
1.Event triggered – A component event is triggered.
2.Capture phase—The framework executes the capture phase from the application root to the source component until all components have been passed. Any processing event can stop propagation by calling stopPropagation() on the event.
3. Bubble phase—The framework executes the bubble phase from the source component to the application root until all components have been passed or stopPropagation() is called.
Rules Of Event Propagation:
1.Event Propagation rules for the component events:
Component events are fired by the child components and processed by the parent component.
MiddleComp is the immediate parent of BottomComp, and TopComp is the immediate parent of MiddleComp and MiddleComp2.
2) Bubble phase: If we do not specify any phase, it is considered a bubble phase.
Example of Bubble Phase:
BottomComp.cmp
<aura:component
<aura:registerEventname=”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:handlername=”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 the Middle component controller
From the top component controller
Here, MiddleComp2 is unable to handle the event fired from BottomComp, because the parent components can only handle component eventsents, and here, MiddleComp is the immediate parent of BottomComp and TopComp is the immediate parent of MiddleComp.
Capture Phase: If we want the event to be handled by TopComp first, then put phase =” capture” in TopComp.
TopComp.cmp:
<aura:component >
<c:MiddleComp/>
<c:MiddleComp2/>
<aura:handler name=”propagationEvent” event=”c:CompEventforpropagation” action=”{!c.doHandleinTop}” phase=”capture”/>
</aura:component>
OUTPUT:
From the top component controller
From the Middle component controller
Points that need to be considered Component Events:
1. Bubble phase will always move 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.
The final sequence for Component Events propagation is :
1. Event fired
2. Capture phase
3. Bubble phase
Create Custom Application Event
<!–c:appEvent–>
<aura:event type=”APPLICATION”>
<!– Add aura:attribute tags to define event shape.
One sample attribute here. –>
<aura:attribute name=”message” type=”String”/>
</aura:event>
event.setParam(“message”, “event message here”);
The component that fires an event can set the event’s data. The component that handles an event can retrieve the event data.
Register Application Events
<aura:registerEvent name=”appEvent” type=”c:appEvent”/>
Fire Application Events
var appEvent = $A.get(“e.c:appEvent”);
appEvent.fire();
Handling Application Events
<aura:handler event=”c:appEvent” action=”{!c.handleApplicationEvent}”/>
Handle Bubbled Event
To add a handler for the bubble phase, set phase=”bubble.”
<aura:handler event=”c:appEvent” action=”{!c.handleBubbledEvent}”
phase=”bubble” />
Handle Captured Event
<aura:handler event=”c:appEvent” action=”{!c.handleCapturedEvent}” phase=”capture” />
Stop Event Propagation
1. In this event object, you can use the stopPropagation() method to stop the event from propagating to other components.
2. You can use the event.pause() to pause the event.
3. You can call pause() or resume() in the capture or bubble phases.
Final Words
Document Object Model (DOM) events follow two consecutive propagation phases that developers follow: Capture (rarely used) and Bubble (widely used). During the capture phase, the DOM tree first goes down and then up in the bubble phase.
The capture phase is always carried out before the bubble phase. The lightning component events also support capture and bubble phases, but there are some frameworks specificities around syntax and behavior. The content hierarchy is a component tree hierarchy from parent to its child. The bubble phase and the capture phase don’t follow the rule that every parent component can handle the event. By default, component owners can handle events raised during the bubble or capture phase.
