COMPONENT EVENT –
Component events are handled by the same component that fires the event or by the component that contains the component that fire the event
APPLICATION EVENT –
Application events are handled by those who are listening to the Application event. These events are based on the publish-subscribe model.
EXAMPLE OF THE COMPONENT EVENT –
Usecase: When a user in the child component click on a button message need to be set in the component event and fire the event by the same component and handled over the Parent component
Component Event –
<!-- EXAMPLE OF THE COMPONENT EVENT -->
<aura:event type="COMPONENT">
<aura:attribute name="msg" type="String"/>
</aura:event>
Child Component –
<!-- CHILD COMPONENT -->
<aura:component>
<aura:registerEvent name="cmpoEvent" type="c:ceEvent"/>
<h1>Component Event Example</h1>
<p><lightning:button
label="Fire Component Event"
onclick="{!c.fireNow}" />
</p>
</aura:component>
Child Controller –
{
fireNow : function(component, event) {
// Get the component event by using the
// name value from aura:registerEvent
var compEvent =
component.getEvent("cmpoEvent");
compEvent.setParams({
"message": "I am setting message
from the child component to the parent
component by the help of a component and
this is my Component event example" });
compEvent.fire();
}
}
Parent Component –
<!-- PARENT COMPONENT -->
<aura:component>
<aura:attribute name="messageFromChildEvent" type="String"/>
<aura:attribute name="numOfEvents" type="Integer" default="0"/>
<!-- Note that name="cmpEvent" in aura:registerEvent
in ceNotifier.cmp -->
<aura:handler name="cmpEvent" event="c:ceEvent" action="{!c.handleCE}"/>
<!-- handler contains the notifier component -->
<c:childComponent/>
<p>{!v.messageFromChildEvent}</p>
<p>Number of events: {!v.numOfEvents}</p>
</aura:component>
Parent Controller
{
handleCE : function(component, event) {
var message = event.getParam("msg");
// set the handler attributes based on event data
component.set("v.messageFromChildEvent", message);
var numEventsHandled = parseInt(component.get("v.numOfEvents")) + 1;
component.set("v.numEvents", numEventsHandled);
}
}
To test this out you need to place your parent component in a lightning application and test it out
<aura:application extends=”force:slds” >
<c:ParentComponent/>
</aura:application>
EXAMPLE OF THE APPLICATION EVENT –
Usecase: Event is fired by Component A and Handled by Component B
Application Event ( aEvent )
<!-- EXAMPLE OF THE APPLICATION EVENT -->
<aura:event type="APPLICATION">
<aura:attribute name="msg" type="String"/>
</aura:event>
Component A
<aura:component>
<aura:registerEvent name="appEvent" type="c:aEvent"/>
<h1>EXAMPLE OF THE APPLICATION EVENT</h1>
<p><lightning:button
label="Click Now for Firing the Application Event"
onclick="{!c.fireEvent}" />
</p>
</aura:component>
Controller A
{
fireApplicationEvent : function(component, event) {
var apEvent = $A.get("e.c:aEvent");
apEvent.setParams({
"message" : "I’M FIRING THE EVENT AND
SET A MESSAGE FROM ONE COMPOENT TO ANOTHER
hEY hOW ARE YOU WELCOME TO SALESFORCE SKY" });
apEvent.fire();
}
}
Component B
<aura:component>
<aura:attribute name="messageEvent" type="String"/>
<aura:attribute name="numOFEvents" type="Integer" default="0"/>
<aura:handler event="c:aEvent" action="{!c.handleAppEvent}"/>
<p>{!v.messageEvent}</p>
<p>Number of events: {!v.numOFEvents}</p>
</aura:component>
Controller B
{
handleAppEvent : function(component, event) {
var message = event.getParam("msg");
// set the handler attributes based on event data
component.set("v.messageEvent", message);
var numEventsHandled = parseInt(component.get("v.numOFEvents")) + 1;
component.set("v.numOFEvents", numEventsHandled);
}
}
Now put both the component in a parent component
<!--Parent Component-->
<aura:component>
<c:A/>
<c:B/>
</aura:component>
Place your Parent Component in a Lightning App to Test it Out
<aura:application extends=”force:slds” >
<c:ParentComponent/>
</aura:application>
STANDARD EVENTS –
Standard events are the ones that are by default came with the framework, so we don’t need to create them we can use them on our own. Like init, show toast etc