Salesforce Lightning is a component based framework for the application development.Component is the core part of the lightning framework. The communication between components are handled by events. There are two types for events:
- Component Event
- Application Event
Component Events can only be handled by components and the communication will be simple between components. Salesforce recommends using Component events instead of application events. The component events can only be registered in child component and handled by parentcomponent.
To create a component event in salesforce, navigate File -> New -> Lightning Event in developerconsole. Name the event, enter the description and click submit to create lightning event.
The syntax for events starts with aura:event and the extension for the event is .evt. The sample component are as follows,
<aura:event type="COMPONENT" description="Event template" > <aura:attribute name="message" type="String"/> </aura:event>
The attribute type is the one that will differentiate Component event from Application event.
The events can be fired from controller. The syntax to fire the event are as follows.
{
fireComponentEvent : function(component, event) {
   // Get the component event by using the name value
   var cmpEvent = component.getEvent("cmpEvent");
   cmpEvent.setParams({
       "message" : "A component event fired me. " +
       "It all happened so fast. Now, I'm here!" });
   cmpEvent.fire();
}
}
The event will be fired when the cmpEvent.fire() is executed. This controller method is called from the component button.
Life cycle of the component events:
- The life cycle of the event starts with firing the event.
- Identify the container component of the event source component. The event source component will the component that is <aura:registerevent /> component.
- Locate all handlers within the container component for the identified component event.
- Execute all handlers, and execute the controller methods that are registered with the handlers.
- Re-render the necessary components.
Basic example for component events:
<aura:event type="COMPONENT" description="Event template" >         <aura:attribute name="message" type="String"/> </aura:event>
Child Component:
The event is registered in this component.
<aura:component >
   <aura:registerEvent name="cmpEvent" type="c:componentEvent"/>
   <ui:button label="fireComponent" press="{!c.fireComponentEvent}" />
</aura:component>Controller:
{
   fireComponentEvent : function(cmp, event,helper) {
//Get the event using registerEvent name.
   var cmpEvent = cmp.getEvent("cmpEvent");
   cmpEvent.setParams({"message" : "A component event fired me. "});
   cmpEvent.fire();
   }
}Parent Component:
The event is wired in this component as a handler.
<aura:component >
   <aura:attribute name="messageFromEvent" type="String"/>
   <aura:handler name="cmpEvent" event="c:componentEvent" action="{!c.handleComponentEvent}"/>
   <c:childComponent />
   <p>{!v.messageFromEvent}</p>
</aura:component>Controller:
{
   handleComponentEvent : function(cmp, event) {
   var message = event.getParam("message");
   // set the handler attributes based on event data
   cmp.set("v.messageFromEvent", message);
);
   }
}
By using component event, the values can be passed from a child component to a parent component via event. Lightning events play an important role in lightning framework.
Reference Link: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_intro.htm
