Events:
An event is an action that is performed by the user, while interacting with an app. Based on that event a developer can decide to perform some manipulation in his code. The events may or may not be triggered by user interaction.
The framework uses event-driven programming. You write handlers that responds to the interface events as they occur.
In the Lightning Component Framework, events are fired by the JavaScript controller actions. Events can contain attributes that can be set before the event is fired and read when the event is handled.
Events are declared by the aura:event tag, and they can have one of two types:
A: 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.
There are two parts of a component event :-
- the component that registers the event and
- the component that handles the event.
To understand it first we need to create a component event as follows:
By default the event created has type as Application which needs to be changed to Component for component events.A component event can have attributes that you can set before firing so that the handling component can use them.
Now we have created two components called eventNotifier and eventHandler component.
Notifier component:
The eventNotifier component first has to register the component so that the framework includes that event in the component for it to fire it.
After registering the event the notifier component needs to fire the event.
Handler component:
The handler component needs to add a handler to specify the controller method to execute and the name of the event to handle when the event has occurred.
The handler binds the controller method to the event. So whenever the event occurs the controller method is run.
Output:
NOTE: We can handle component events in a particular order from the innermost to the outermost component or vice-versa. This can be done by specifying the phase in the handler of the event. An event can be handled in one of the phases i.e. bubble phase or capture phase. To know more about event handling order and propagation of events in lightning refer to Event propagation.
B: Application Event:
Application events are used when you need two independent component to communicate with each other i.e. they don’t need to be in the component hierarchy or nested within each other. Application events are handled by all components that are listening to the event. These events are essentially a traditional publish-subscribe model.
Below is the example of an Application event which is similar to component event example:
Here we have three components namely eventNotifier and eventHandler and a container component that contains both the components.
Application Event:
Notice here the type of event is Application. We have created one attribute to pass the data before firing this event.
Notifier component:
The notifier component registers the application using registerEvent tag and specifying the name of the application event.
This component has a button which fires the event. The event is fired in the controller as follows:
Handler Component:
The handler component handles the event by setting the message attribute to the value that is received from the notifier event.
The handler receives the message as a parameter from the event, then sets its own attribute to the value received.
Container component:
Container component includes both the components to put it all together to mimic a standalone application.
Output:
