Create a Lightning Application Part -3

Events in Aura

Events are used to send and receive the data from one component to another component.

The component from which we want to send the data has to fire the event by passing the required values or parameters.

The receiver component can use a <aura:handler> tag to receive that event and perform certain actions based on that.

One of type of Event is Application Event which is explained below:

Application Events

Application Events are a type of event that whenever fired, sends the data to all the components who are handling that event.

Create Events

To create an event, in the developer console, go to File > New > Lightning Event

Below is an example code of the event file

<aura:event type="APPLICATION">
    <aura:attribute name="searchKey" type ="String"/>
</aura:event>

Note: Above is Application event, to create Component event, replace “type” attribute value in <aura:event> to “COMPONENT”.

Receiver Component

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

Example of Lightning Component(get record from search)

<!-- HTML File -->

<aura:component >
    <input type="text" class="form-control"  onkeyup="{!c.searchKeyChange}" placeHolder ="Search" />
	                                                                                         
</aura:component>

//JS File

({
searchKeyChange : function(component, event, helper) 
    {
     var myEvent =$A.get("e.c:searchKeyChange");

     myEvent.setParams({"searchKey":event.target.value});

     myEvent.fire(); // firing the event
     }
})