Component Events In Salesforce Simplified

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.

The above diagram illustrates that a component event can be handled by the same component or any of the parent components in the containment hierarchy.

Create Custom Component Events

Open the developer console.

Go to File > Lightning Event

Enter the name – MyComponentEvent and click Submit.

Save the following code in the MyComponentEvent.evt

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

In order to create a component event, the type attribute inside aura:event should be equal to COMPONENT.

You can specify the parameters this event will accept by using an aura:attribute.

Register Component Event

You have to register or specify a component event in the component markup where it is expected to be fired.

You can register an event using the <aura:registerEvent> in the component markup.

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

In aura:registerEvent, the type attribute accepts the name of the component with a namespace prefix. Here c is the default namespace.

name attribute accepts a name for this event which will be used to firing & handling the event.

Fire Component Event

You can fire an event using the fire() method.

The following snippet shows how to fire a component event:

var compEvent = cmp.getEvent("componentEvent");
compEvent.setParams({"eventMessage" : "paramterValue" });
compEvent.fire();

In the above code block, we have fired a component event. Along with it we also set the event parameters using the setParams() method.

Handling Component Events

Component Handling Its Own Event:

A component can handle its own event by using the tag in its markup.
The action attribute sets the client-side controller action to handle the event.

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

Handle Component Event of Child Component:

A child component has to first register in its markup that it will fire an event.

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

The immediate parent component should declare a handler for the event which will be fired in the child component.

<aura:component>
    <c:child componentEvent="{!c.handleChildEvent}"/>
</aura:component>

In the above component markup, we are declaring the event handler within the <c:child> tag.

The parent component can only use this syntax to handle events from a direct child component.

If you want to be more explicit in c:parent that you’re handling an event, or if the event might be fired by a component further down the component hierarchy, use a <aura:handler> tag instead of declaring the handler within the tag.

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

Component Event Example

In the below example we are firing a component event and it is handled in the same component in which it is fired.

Please save the following code:

<aura:component>
    <aura:registerEvent name="componentEvent" type="c:MyComponentEvent"/>
    <aura:handler name="componentEvent" event="c:MyComponentEvent" action="{!c.handleComponentEvent}"/>
  
    
    <lightning:button variant="neutral" label="Fire Event" title="Fire Event" onclick="{!c.clickHandler}"/>
</aura:component>	

({
    clickHandler : function(component, event, helper) {
        var compEvent = component.getEvent("componentEvent");
        compEvent.setParams({"eventMessage": "Hey, Have an awesome day!"});
        compEvent.fire();
    },
    handleComponentEvent : function (component, event, helper) {
        var msg = event.getParam("eventMessage");
        console.log('message > ' + msg);
    },
})

Below is the preview of this component:

Please note that the name attribute in the <aura:handler> must match the name attribute in the <aura:registerEvent> tag in the component that fires the event.

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂