Application Events vs Component Events : How to use for handling custom events in Lightning

Application Events vs Component Events : Which/How to use for handling custom events in Lightning

Lightning framework is based on event-driven architecture which allows to communicate between different events. Lightning events can be fired or handled by javascript controller. Event are triggered by user action.

As we know that along with system events, there are 2 types of custom lightning events:

• Application Events
• Component Events

Here I am going to explain difference between them along with code sample.

Component Events 

1. Components events can be handled by same component or component which is present in containment hierarchy (component that instantiates or contain component).
2. Below is syntax for creating component event.
   
    <aura:event type="COMPONENT" description="Event template" >                                          <aura:attribute name="msg" type="String" access="GLOBAL"/>                                               </aura:event>
   
   
3. Below is syntax for firing component events from javascript controller.
   
   var accidentEvent = component.getEvent("newCarAccident"); accidentEvent.setParams({"msg":"New Message!!!."});                               accidentEvent.fire();
   
   
4. While handling component events, we need to specify name attribute in  <aura:handler>
   
   <aura:handler action="{!c.handleNotification}" event="c:carAccidentComponentEvent" name="newCarAccident">
   
   Make sure that name attribute is same as that of name attribute while registering the event.
   
   

Application Events

1. This kind of events can be handled by any component which is listening to it (have handler defined for event). It is kind of publish-subscribe modal.
2. Below is syntax of creating application event.
   
   <aura:event type="APPLICATION" description="Event template" >                                                     <aura:attribute name="msg" type="String" access="GLOBAL"/>                           </aura:event>
   
   
   
3. Below is syntax to file application events from javascript controller.
   
   var appEvent = $A.get("e.c:carAccidentAppEvent");               appEvent.setParams({"msg":"New Message!!!."});                                               appEvent.fire();
   
   
4. While handling application events, no need to specify name attribute in <aura:handler>
   
   <aura:handler event="c:carAccidentAppEvent" action="{!c.handleNotification}"/>

System Events

1. These events are fired automatically by the framework such as during component initialization, attribute value change, rendering etc. All Components can register for system events in their HTML markup.
2. Few examples of system events are init, aura:waiting, aura:doneWaiting, aura:doneRendering etc.
3. If app or component is rerendered, then init event is fired. If server side call is made in init then, aura:waiting event is fired. Once the server call is finished then aura:doneWaiting event is fired. After this aura:doneRendering is fired.

Events Best Practices:

1. Always try to use component events. Component event usage is more localized as these can be used by same component or component in containment hierarchy.
2. If you use application events then it may fire system events.
3. Use Application events only if components are present in 2 different app or are not in containment hierarchy.

I have created GitHub project which contains example demo for Application events and Component Events. You can download complete code from below URL:

Sample code for Application Events and Component Events

Hope this help!!!