Salesforce Lightning Events Part 5 - Application Events Introduction

Hello and welcome to the 5th tutorial of Salesforce Lightning Events Tutorial Series. As you are already aware of the component events, their types and how they propagate in salesforce. It's time to move on to the application events in Salesforce Lightning.

In simple terms, Application Events are just like broadcast messages. As when you have to send a broadcast message, you broadcast your message from a single device and all the other devices that have the receiver turned on for that message can receive that. Similarly, an application event is fired from one component and all the other components that have the handler defined for that event are notified and they can handle that application event. The component that fires the application event is called Source Component. Lightning Framework supports 3 phases for the propagation of application events:-

1. Bubble Phase
2. Capture Phase
3. Default Phase

Now we'll be discussing these phases one by one:-

Bubble Phase

The flow of event in this phase is much similar to what we have done in the component event. In this phase, the component that fired the event can handle it. The event in bubble phase traverse from the source component to the application root. While the event is traversing towards the application root, any component in the containment hierarchy can handle this event. If any handler stops this event from propagating using event.stopPropagation(), then no more handlers will be called in this phase.

Capture Phase

In this phase, the event handlers are invoked from the application root towards the source component that fired the event. Any registered handler in the component hierarchy can stop the event from propagating by using event.stopPropagation() after that no more handlers will be able to handle the event in this phase or the bubble phase. If you have gone through the previous tutorials, you shoule be aware that the capture phase handlers always run before the bubble phase.

Default Phase

In this phase, the event handlers are invoked from the root to the source component which fired the event. If the event's  propagation wasn't stopped in the previous phase, the root corresponds to the application root. Otherwise, the root corresponds to the component who stopped the event from propagating further using event.stopPropagation(). This phase will execute only when event.preventDefault() was not called previously in capture or bubble phases.

Points to be noted:- 

1. Any handler in the Bubble or Capture phase can cancel the default behavior of the event by calling event.preventDefault() i.e. if this method is invoked previously, the handlers in the default phase will not handle the event.
2. If the event's propagation wasn't stopped in the previous phase, the root node for the default phase corresponds to the application root. Otherwise, the root node corresponds to the component in which the handler called event.stopPropagation() to stop the propagation of event.

So, now you know about the basics of application events. In the next post in this series, we'll go into the detail of application events and understand each phase one by one. If you liked this post, do share it among others and let me know your feedback in comments.

Happy Trailblazing..!!