Events in Lightning

Introduction

Events in lightning are used to transfer a message or data between two different aura components. Events are useful when you want to send some data from one aura component to another to pass crucial information amongst components.

Events in lightning are of two types :

Component Events
Application Events

Component Events

A component event fired by an aura component travels through the component hierarchy and can be received by all the components in the hierarchy including itself. Then the question is what is component hierarchy?

Component hierarchy is the path of the aura components from the source component (the component which fired the event) to the top most component in the application (which has no parent basically).

So for example, if we have this structure :

The Hierarchy is noted next to each component.

Application Events

Application events work more like a broadcast and receive model. Any aura component can fire an application event and all the other components in the markup will receive it. Application event propagation doesn’t depend on any hierarchy or structure of the lightning components.

Application events are generally used when we want to send data from a parent to child components since we cannot do that with component events since component events only travel upwards in the component hierarchy.

NOTE :
Although application events can be used to send data from a parent component to a child aura component, this can also be achieved just by using lightning attributes or aura method.

Defining Events

In order to use events, we need to create events first. In order to create an application/component event, open the developer console.

Then go to, File- > New -> Lightning Event.

Screenshot :

Then name your event, note that the event file is saved as .evt file.

The default event structure looks something like this :

Code:

<aura:event type="APPLICATION" description="Event template"/>

The type attribute in the event tag represents if the event is an application or component event.

type = “APPLICATION” is an application event
type = ”COMPONENT” is a component event

We can also add attributes in the event structure, then these attributes are used to send data in the event payload, for example :

Code:

<aura:event type="APPLICATION" description="Event template">
    <aura:attribute name="text" type="String"/>
    <aura:attribute name="amount" type="Integer"/>
    
</aura:event>

Here, we defined two attributes inside the event definition called “text” and “amount” of type String and Integer respectively. These can be set while firing the event from any aura component and the value for these will be passed alongside the event to every aura component that receives the event.

Implementation

The implementation of events consists of two parts :

Firing the Event.
Handling the Event.

So, we fire an event from a component called the source component. Then the event propagates from one component to another until,

It reaches the top-most component in the hierarchy (the root component) for component events, or
If it reaches all the components for application events.

Firing an Event

In order to fire an event from an aura component, we need to register the event in our aura component. This can be done by using the <aura:register> tag.

Code:

<aura:registerEvent  name="event" type="c:MyEvent"/>

In the type tag, we need to use this format : <namespace>:<event name>. In the above example, c represents the default namespace, just like in the component references.

The syntax is the same for both component and application events for registering the event. Once the event is registered, then we can fire it from our javascript controller/helper.

For Component Events

Define the Event :

Let’s define a new component event called “MyComponentEvent” in the same way that we defined the above “MyEvent”. Go to File -> New -> Lightning Event

Name it as ‘MyComponentEvent’,

And paste this code into the event body :

Code:

<aura:event type="COMPONENT" description="Event template" />

The “type” in the event is COMPONENT, which defines that it’s a component event.

Register the Event :

<aura:registerEvent name="cmpEvent" type="c:MyComponentEvent" />

We use the “registerEvent” tag to register an event to our aura component. The “type” is “c:MyComponentEvent” where “c” refers to the default namespace of the org. The “name” can be set as per the developer, we have used “cmpEvent” in this example.

Fire the Event :

Paste this code below in your javascript controller :

({
	fireEvent : function(component, event, helper) {		
        var event = component.getEvent("cmpEvent");        
        event.setParams({
            "text" : "value" 
        });        
        event.fire();
	}
})

For the component events, we need to do use the “getEvent” method to fetch the event and the event name must match the name in the aura registration for the event, in the example above the event had the name “cmpEvent” in the aura register, that’s why we did component.getEvent(“cmpEvent”).

Then we can get the attributes inside the event by the “setParams” method.
And lastly, the “fire()” method fires the event from the component.

For Application Events

Create an Application Event:

Now, let’s create a new application event, just as we did for the component event.

Name it as ‘MyApplicationEvent’.

And paste the below code in the event body :

Code :

<aura:event  name="APPLICATION" description="My first application event" />

Register the Event :

<aura:registerEvent name="appEvent" type="c:MyApplicationEvent"/>

For the application events, you don’t need to fetch the event by its name in the aura register. Instead, we can directly get the event with the “$A.get” method. The “e” notation signifies that this is an event and the “c” is again for the default namespace for which the event belongs to.

Fire the Event :

({
	fireEvent : function(component, event, helper) {		
        var appEvent = $A.get("e.c:MyEvent");        
        appEvent.setParams({
            "text" : "value" 
        });        
        appEvent.fire();
	}
})

The “setParams” and “fire()” methods work the same way for application events as they do for component events.

Handling an Event

While the event might be received at a component automatically, we need to handle the event with the “” tag. This works a little differently for component and application events, so let’s look at them one by one.

For Component Events

For component events, the handler syntax goes like this,

<aura:handler name="cmpEvent"
                  event="c:MyEvent" 
                  action="{!c.handleEvent}"/>

Where, the name tag must be the same as the name in the “aura:handler” where the event is being fired from. If it’s different the event is not handled in the receiver aura component.

The “event” is used to specify the event name with “c” again representing the default namespace.

The “action” tag points to a function in our javascript controller, so this function will be called as soon as we receive the event.

In the javascript side, we can use the “event.getParam” function to read the attributes being passed in the event body like this :

({
	handleEvent : function(component, event, helper) {		
        var text = event.getParam("text");        
        alert(text);
	}
})

This will print out the “text” value being passed in the event payload.

For Application Events

For application events, the handler syntax not does require a “name” to work. In fact, if we specify a “name” then the event would not be handled properly.

<aura:handler event="c:MyApplicationEvent" action="="{!c.handleApplicationEvent}"/>

The “event” and “action” work the same way as component events, where the “event” specifies the type of the event and the “action” points to a javascript function.

And then in the javascript method, it works the same way as component events :

({
	handleApplicationEvent : function(component, event, helper) {		
        var text = event.getParam("text");
		        alert(text);
	}
})

The “getParam” method works the same way for component events as well. This should allow us to read any attribute value from the event payload and process accordingly.

Salesforce Menu

Salesforce Lightning

Salesforce LWC

Events in Lightning

Introduction

Component Events

Application Events

Defining Events

Code:

Code:

Implementation

Firing an Event

For Component Events

Define the Event :

Register the Event :

Fire the Event :

For Application Events

Create an Application Event:

Register the Event :

Fire the Event :

Handling an Event

For Component Events

For Application Events