What Are Events In Salesforce Lightning Component

Event Introduction

Lightning framework uses event-driven programming

• Events handle communication between two components.
• Events are fired from the Javascript controller by using fire() predefined method.

Types of Events in Lightning Component

• Application Event
• Component Event
• System Event

Application Event 

Application Event is fired from the Instance of component and can be handled in any component. Application event can be handled all over the application. 

Don't forget to check out: Getting Started with Salesforce Lightning Components and Record Pages

Component Event

Component Event is fired from Child Component and handled by parent component or component that fired the event. It can only be handled in the parent component.

System Event 

During component initialization, attribute value change, rendering, etc system events are fired automatically.

Examples of system events.

• aura:doneRendering
• aura:doneWaiting
• aura:locationChange

Example of Application Event and Component Event with Propagation

Component A

<aura:component >
    <aura:attribute name="phase" type="integer" />
    <aura:handler event="c:ApplicationEventEx" action="{!c.handleEvent1}" />
    <aura:registerEvent name="CompEvent" type="c:componentEVent1"></aura:registerEvent>
    <aura:handler name="CompEvent" event="c:componentEVent1" action="{!c.handleEvent}"  ></aura:handler>
            {!v.body}    
    <div class="white">
        <lightning:button value ="Fire Component Event "  label="Component A1-Component Event" onclick="{!c.executeEvent}"/>
        <lightning:button value ="Fire Component Event "  label="Component A1 -Application Event" onclick="{!c.executeEvent1}"/>
    </div>                       
</aura:component>
({
handleEvent : function(component, event, helper) {
    alert('Component A1-Component Event')
                 alert(event.getPhase());        
    },
    handleEvent1 : function(component, event, helper) {
     alert('Component A1 -Application Event')        
    },
    executeEvent : function(component, event, helper) 
    {
           alert('Event is fired from Component A1-Component Event')
            var compEve = component.getEvent('CompEvent');
           compEve.setParams({
            "count" : 1
     });
           compEve.fire();        
    },
    executeEvent1:function(component, event, helper) {
           var appEvent = $A.get("e.c:ApplicationEventEx");
           alert('Event is fired from Component A1-Application Event')
                   appEvent.fire();
    }
})

Component B 

<aura:component >
    <aura:attribute name="testWord" type="String" />
    <aura:attribute name="phase1" type="String"  />
    <aura:handler event="c:ApplicationEventEx" action="{!c. handleEvent1}" phase="default" />
    <aura:registerEvent name="CompEvent" type="c:componentEVent1"></aura:registerEvent>
    <aura:handler name="CompEvent" event="c:componentEVent1" action="{!c.handleEvent}"  includefacets="true"  ></aura:handler>
            {!v.body} 
    <div class="white1">
        <lightning:button value ="Fire Component Event "  label="Component B-Component Event" onclick="{!c.executeEvent}"/>    
        <lightning:button value ="Fire Component Event "  label="Component B -Application Event" onclick="{!c.executeEvent1}"/>             
    </div>
    <br/><br/>
</aura:component>
({
handleEvent : function(component, event, helper) {
     alert('Component B-Component Event')           
                alert(event.getPhase());                        
    },
     handleEvent1 : function(component, event, helper) {
     alert('Component B -Application Event')        
    },
   executeEvent : function(component, event, helper) 
    {
          alert('Event is fired from Component B-Component Event')
            var compEve = component.getEvent('CompEvent');                              
           compEve.setParams({
            "testWord1" : 'Component C'
     });
           compEve.fire();        
    },
     executeEvent1:function(component, event, helper) {
           var appEvent = $A.get("e.c:ApplicationEventEx");
           alert('Event is fired from Component B -Application Event')
                   appEvent.fire();	
    }
})

Component C

<aura:component >
    <aura:handler event="c:ApplicationEventEx" action="{!c.handleEvent1}"  />
    <aura:attribute name="phase1" type="String"  />
    <aura:registerEvent name="CompEvent" type="c:componentEVent1"></aura:registerEvent>
    <aura:attribute name="testWord1" type="String" />
    <aura:handler name="CompEvent" event="c:componentEVent1" action="{!c.handleEvent}"   ></aura:handler>
    {!v.body} 
    <div class="white">
        <lightning:button value ="Fire Component Event "  label="Component C-Component Event" onclick="{!c.executeEvent}"/>    
        <lightning:button value ="Fire Component Event "  label="Component C -Application Event" onclick="{!c.executeEvent1}"/>
             {!v.testWord1}
    </div>
    <br/><br/>
</aura:component>
({
handleEvent : function(component, event, helper) {
     alert('Component C-Component Event')
      var eventParam = event.getParam('testWord');           
            // component.set("v.testWord1",eventParam);        
    },
     handleEvent1 : function(component, event, helper) {
     alert('Component C -Application Event')            
    },
   executeEvent : function(component, event, helper) 
    {
           alert('Event is fired from Component C-Component Event')
            var compEve = component.getEvent('CompEvent');
           compEve.setParams({
            "testWord1" : 'Component D'
     });
           compEve.fire();        
    },
    executeEvent1:function(component, event, helper) {
           var appEvent = $A.get("e.c:ApplicationEventEx");
           alert('Event is fired from Component C -Application Event')
                   appEvent.fire();	
    }
})

Check out another amazing blog by Kirandeep here: Get Started With Triggers in Salesforce | The Complete Guide

Component D

<aura:component >   
    <aura:handler event="c:ApplicationEventEx" action="{!c.handleEvent1}" includefacets="true" />
    <aura:registerEvent name="CompEvent" type="c:componentEVent1"></aura:registerEvent>
    <aura:attribute name="count1" type="integer" />
    <aura:handler name="CompEvent" event="c:componentEVent1" action="{!c.handleEvent}"  includefacets="true"></aura:handler>
    {!v.body}   
    <div class="white">
        <lightning:button value ="Fire Component Event "  label="Component D-Component Event" onclick="{!c.executeEvent}"/>
        <lightning:button value ="Fire Component Event "  label="Component D -Application Event" onclick="{!c.executeEvent1}"/>
           {!v.count1}
    </div>
    <br/><br/>          
</aura:component>
({
handleEvent : function(component, event, helper) {
       alert('Component D -Component Event')
  		    var eventParam = event.getParam('count');          
             alert(event.getPhase());
         component.set("v.count1",eventParam);                      
    },
    handleEvent1 : function(component, event, helper) {
     alert('Component D -Application Event')        
    },
    executeEvent : function(component, event, helper) 
    {
           alert(' Event is fired from Component D-Component Event')
            var compEve = component.getEvent('CompEvent');        					
           compEve.fire();        
    },
    executeEvent1:function(component, event, helper) {
           var appEvent = $A.get("e.c:ApplicationEventEx");
           alert('Event is fired from Component D -Application Event')
                   appEvent.fire();
    }
})
<aura:application extends="force:slds">
     <c:ComponentD>  
         <c:ComponentC>
             <c:ComponentB>
                 <c:Component A/>             
           </c:ComponentB>
         </c:ComponentC>
    </c:ComponentD>        
</aura:application>