Component Events in Salesforce Lightning Framework

Component Events can be fired from the same component. It is used to communicate data to another component. Component events are divided into two sections  <aura:registerEvent> ( In this section, we can register the event) and <aura:handler> (In this, we can handle the register event).  Usually, one component is interested in the event, as an event aggregator.

We can create a custom component event by using this tag <aura:event> in a .evt resource. In component events, we can take the type attribute value as ‘COMPONENT’ inside the <aura:event> tag.

Example: componentEvent.cmp

<aura:event type="COMPONENT" description="Component Event template">
    <aura:attribute name="recordByEvent" type="sObject"/>
</aura:event>

To fetch the attribute value from this event, we can call event.getParam("recordByEvent") in the handler’s client-side controller.

Don't forget to check out: How to Setup Salesforce on VS Code - Developer Guide

Let’s start the discussion about registerEvent and handle

1. <aura:registerEvent>: If you want to get a reference to component events in JS. you have to use cmp.getEvent(“EventName”). Where EventName is the name of attribute in <aura:registerEvent>. Let’s take an example for registerEvent:

   <aura:registerEvent name="ComponentEventTemplate"  type="c:componentEvent">
   

   Fire(): E.g.: 

   var Event = cmp.getEvent(“ComponentEventTemplate “);
   Event.setParams({“recordByEvent” : getSelectRecord });
   Event.fire();
   

2. <aura:handler>: It is the markup of the handler component.  E.g.:

   <aura:handler name="ComponentEventTemplate" event="c:componentEvent" action="{!c.handleComponentEvent}"/>

   Important Point: Name attribute of <aura:handler> is the same as <aura:registerEvent>.

Component Event provides two phases

Bubble phase and Capture phase. In component events, phases are used for the propagation of events. Phases are alike to DOM handling patterns.

Let’s discuss these phases…..

Bubble Phase

Bubble phase is also known as Bubbling. In this, the Event is first captured and handled by the source component and then propagated by application root. 

<aura:handler name="ComponentEventTemplate" event="c:componentEvent" action="{!c.handleComponentEvent}"/>

Capture Phase

In this, the Event is first captured by application root and then propagated by source component. The capture phase is also known as trickling, Which recollects the propagation order.

<aura:handler name="ComponentEventTemplate" event="c:componentEvent" action="{!c.handleBubbing}" phase="capture"/>

If you want to add a handler for the phase (especially for the capture phase because handlers are connected with bubble phase by default.) Let's see an example for adding a capture phase in the Component event handler: 

<aura:handler name="ComponentEventExample" event="ns:eventName" action="{!c.handleComponentEvent}" phase="capture"/>

Salesforce Lightning Component Event

Let’s take an example for the Component Event. In this example, we will see how we can fire events from the child component and handle them in the parent component.

1. Component Event: We can create an event and it is named cmpEvent.evt. It is used to pass data in the event when it’s fired.

<aura:event type="COMPONENT" description="Component Event Example">
    <aura:attribute name="message" type="String" />
</aura:event>

2. Notifier Component: (Child component) This component uses <aura:registerEvent>. And the child component is named childCmp.cmp 

<aura:component>
    <aura:registerEvent name="cmpEvent" type="c:cmpEvent.evt"/>
    <h1>Component Event Example</h1>
    <p><lightning:button label="Click here to fire a component event" onclick="{!c.fireComponentEvent}" /> </p>
</aura:component>

Check out another amazing blog by Shweta here: Pardot in Salesforce - An Introduction

3. Now we can create the controller for childCmp.cmp. 

({
    fireComponentEvent : function(component, event) {
        var cmpEvent = cmp.getEvent("cmpEvent");
        cmpEvent.setParams({
            "message" : "Hello " +
            "World!" });
        cmpEvent.fire();
    }
})

4. Handler Component: (Parent Component) This component contains the above child component childCmp.cmp. In this we can use the <aura:handler> tag. And the parent component is named ParentComponent.cmp

<aura:component>
    <aura:attribute name="messageTemplate" type="String" />
    <aura:attribute name="numberOfEvents"  type="Integer" default="Integer" />
    <aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEvent}" />
    <c:childCmp />
    <p>{!v.messageTemplate}</p>
    <p>Number of events: {!v.numberOfEvents}</p>
</aura:component>

5. Now we can  create the controller for ParentComponent.cmp 

({
    handleCmpEvent: function(component, event) {
        var message = event.getParam("message");
        cmp.set("v.messageTemplate", message);
        var EventsHandled = parseInt(cmp.get("v.numberOfEvents")) + 1;
        cmp.set("v.numberOfEvents", EventsHandled);
    }
})