Create, Fire and Handle Component Event

In Lightning framework there is need to create, fire and handle component event because the model uses events to communicate data between components. Events are usually triggered by a user action.

There are two types of events in the framework:

  • Component events are handled by the component itself or a component that instantiates or contains the component.
  • Application events are handled by all components that are listening to the event. These events are essentially a traditional publish-subscribe model

Component Events
A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event. These events can only be handled by components above them in the containment hierarchy so their usage is more localized to the components that need to know about them.

Creating Component Events
Events are declared by the aura:event tag in a .evt resource.
To create a custom component event from Developer Console

  1. Click File | New | select Lightning Event
  2. Name it as desired like cmpEvent just as the one I’m using in this post
  3. Click Submit button. It will give you a default code – cmpEvent
  4. Use type=”COMPONENT” and change the self-closing tag to open and close tags like the one below

    <aura:event type=”COMPONENT”> 
    </aura:event>

Event Attribute(s)

Use <aura:attribute> to add attribute to the Component Event. For example, this c:cmpEvent (c here is the default namespace) component event has one attribute with a name of message

<aura:event type=”COMPONENT”>   
<aura:attribute name=”message” type=”String”/>
</aura:event>

The attributes in Events can be set before the event is fired from JavaScript controller actions and read when the event is handled.

To set the attribute values, call event.setParam() or event.setParams().

A parameter name set in the event must match the name attribute of an <aura:attribute> in the event. For example, if you fire c:cmpEvent, you could use:

event.setParam(“message”, “Enter the event message here”);

Component that fires the Event

Create a component – cmpChild and register the event cmpEvent using aura:registerEvent tag as it is in the code below:

<aura:component>
<aura:registerEvent name=”cmptEvent” type=”c:cmpEvent”/>    <h1>Create and Fire Component Event</h1><br/>
    <p><lightning:button  label=”Click To Fire Component Event”  onclick=”{!c.fireCmpEvent}” /></p>
    </aura:component>

To create the client-side controller for cmpChild, click CONTROLLER in the sidebar of the component. Replace the default code with this one

fireCmpEvent : function(cmp, event) {
// Use the name value from aura:registerEvent i.e cptEvent
        var cpEvent = cmp.getEvent("cptEvent");
        cpEvent.setParams({
"message" : "This is the component event message for this post that has been fired. " });
        cpEvent.fire();
    }

Component that Handles the Event

The component that handles an event can retrieve the event data. To retrieve the attribute value, call event.getParam() in the handler’s client-side controller.
Create a handler component – cmpParentHandler that handles the event cmpEvent using aura:handler tag as it is in the code below

<aura:component >
     <aura:attribute name="msgFromEvent" type="String"/>
    <aura:attribute name="numEvents" type="Integer" default="0"/>
    
   <!--Use name="cptEvent" in aura:registerEvent in cmpChild.cmp in this handler-->
    <aura:handler name="cptEvent" event="c:cmpEvent" action="{!c.handleCmpEvent}"/>

    <!--Below is the child component that fires the event -->
    <c:cmpChild /> <br/>   
    
    <p>This is the message: {!v.msgFromEvent }</p><br/>
    <p>Number of events: {!v.numEvents}</p>	
</aura:component>

For the handler’s controller, click CONTROLLER in the sidebar of the cmpParentHandler.cmp and replace the default code with the one below

({
	    handleCmpEvent : function(cmp, event) {
          var msg = event.getParam("message");
            
        // set the handler attributes based on event data
        cmp.set("v.msgFromEvent", msg);
        var numEvts = parseInt(cmp.get("v.numEvents")) + 1;
        cmp.set("v.numEvents", numEvts);
    }

})

The following is the output of the code when I clicked the button once

CmpMessage

Resources
Lightning Aura Components Developer Guide