Lightning Events: Detail Overview

In my previous post I have explain the Lightning Basic. But in that post we only cover basics of Lightning events. Lightning events are more complex and need a detailed separate post. So today we will cover lightning events in details.

Events are used in Lightning to communicate between two components and pass data between them. In Lightning we have two types of Events:

1. Component Event
2. Application Event

Component Event: 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.

Here’s the sequence of component event propagation.

1. Event fired—A component event is fired.
2. Capture phase—the framework executes the capture phase from the application root to the source component until all components are traversed. Any handling event can stop propagation by calling stopPropagation() on the event.
3. Bubble phase—The framework executes the bubble phase from the source component to the application root until all components are traversed or stopPropagation() is called.

Create Custom Component Events

We can create a custom component event with file .evt. Events can contain attributes that can be set before the event is fired and read when the event is handled. Use type=”COMPONENT” in the tag for a component event. For example, this c:compEvent component event has one attribute with a name of message.

<!--c:compEvent-->
<aura:event type="COMPONENT">
    <aura:attribute name="message" type="String"/>
</aura:event>

Fire Component Events We can fire the Component event to pass data to other 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.

Register an Event A Component first register a event which he will fire. Value of the name attribute is used for firing and handling events. name is a required attribute in component event. Fire an Event To get a reference to a component event in JavaScript, we can use `cmp.getEvent(“evtName”)` where evtName matches the name attribute . And we need to  Use fire() to fire the event from an instance of a component. For example, This is similar as action attribute in apex:actionfunction.

var compEvent = cmp.getEvent(“sampleComponentEvent”);

// Optional: We can also set the data in attribute which we need to pass

// A parameter’s name must match the name attribute of one of the event’s tags

// compEvent.setParams({“myParam” : myValue });

compEvent.fire();

Handling Component Events

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 name attribute must match the name attribute in the tag in the component that fires the event. The action attribute sets the client-side controller action to handle the event. The event attribute specifies the event being handled. The format is namespace:eventName

In my next post we will cover the Application event and some difference between these two.

Do you have anything to add please let me know in comments section. Happy Programming 🙂