Application event and Component event with Example

 Application Events:

A. Application Events are handled by any component have handler defined for event.These events are essentially a traditional publish-subscribe model.

B. Application event can be used through out the application.

C. We use attribute type="APPLICATION" in the aura:event tag for an application event.

D. While handling application events, no need to specify name attribute in aura:handler.

E. We use $A.get("e.myNamespace:myAppEvent") in JavaScript to get an instance of the Application type event.

Component Events

A. Component Events can be handled by same component or a component that instantiates or contains the component.

B. The component events can only be registered in child component and handled by parent component.

C. We use attribute type="COMPONENT" in the aura:event tag for an component event.

D. While handling component events, we need to specify name attribute in aura:handler. The name attribute in aura:handler must match the name attribute in the aura:registerEvent tag in the Child Component that fires the event.

E. We use cmp.getEvent("evtName") in JavaScript to get an instance of the Component type event.

Example

ComponentEvent: ak@infoglen.com

====================

<aura:event type="component" description="Event template" >

<aura:attribute name="info" type="String" />

</aura:event>

====================

Child component

<aura:component >

    

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

    <!-- get value from parent to child  component -->

    <aura:attribute name="chidlValue" type="String" />

    MY child value after calling the parent is ==> {!v.chidlValue}<br/>

    <!--dd-->

<lightning:button label="Submit" onclick="{!c.doAction}"/>

    <c:GrandChildComp />

</aura:component>

=========================

Child component Controller

({

    doAction : function(component, event, helper) {

        alert("ChildController called");

        var compEvt= component.getEvent("RegEvent");

        compEvt.setParams({"info": "i am child values call by the event"});

        compEvt.fire();

    }

})

=============================

Parent component

<aura:component>

    <aura:attribute name="parentvalue" type="String" />

<aura:handler name="RegEvent" event="c:componentEvent" action="{!c.handleEvent}"/>

    <c:ChildComponentForEvent chidlValue="{!v.parentvalue}"/>

    <br/>

    value is : {!v.parentvalue}

</aura:component>

========================================

Parent component Controller

({

    handleEvent:function(component,event,helper)

    {

        alert('parent Controller called');

        var val=event.getParam("info");

component.set("v.parentvalue",val);

        alert('values get from child component==>'+val);   

    }

})

=====================================

Grand Child component

<aura:component >

    <aura:attribute name="grandChildValue" type="String" />

    <aura:registerEvent Name="RegEvent" type="c:componentEvent" />

    <br/>

    GrandChild value is ==>{!v.grandChildValue}

    <aura:handler name="RegEvent" event="c:componentEvent" action="{!c.invoke}" />

    <br/>

    <lightning:button label="Grand child call" onclick="{!c.GAction}" />

</aura:component>

=====================================

Grandchild Controller

({

GAction : function(component, event, helper) {

        var gEvent= component.getEvent("RegEvent");

        gEvent.setParams({"info":"i am Grand child"});

        alert('Grand controller called');

       

        gEvent.fire();

},

    

    invoke: function( component,event, helper)

    {

        alert('invoke called');

    var c= event.getParams("info");

    component.set("v.grandChildValue", c );

}

})

====================

Application Event

This event is not required any parent-child relation.

Ex:

Application event: MyAppEvt

<aura:event type="APPLICATION" description="Event template" >

<aura:attribute name="info" type="String" />

</aura:event>

=============================

Child Component1

<aura:component >

    <aura:registerEvent name="RegEvent" type="MyAppEvt"/>

<lightning:button label="Submit" onclick="{!c.doAction}"/>

</aura:component>

Child Component1 controller

({

doAction : function(component, event, helper) {

        alert("ChildController called");

        var AppEvt= $A.get("e.c:MyAppEvt");

        AppEvt.setParams({"info": "i am child values call by the event"});

        AppEvt.fire();

}

})

Child Component2

<aura:component>

    <aura:attribute name="value1" type="String" />

<aura:handler event="c:componentEvent" action="{!c.handleEvent}"/>

Child value: {!v.value1}

<aura:component>

Child Component2 controller

({

    handleEvent:function(component,event,helper)

    {

        alert('Controller called');

        var val=event.getParam("info");

component.set("v.value1",val);

 }

})

===============================

Child Component3

<aura:component>

    <aura:attribute name="value1" type="String" />

<aura:handler event="c:componentEvent" action="{!c.handleEvent}"/>

Child value: {!v.value1}

<aura:component>

Child Component3 controller

({

    handleEvent:function(component,event,helper)

    {

        alert('Controller called');

        var val=event.getParam("info");

        component.set("v.value1",val);

 }

})

===============================

Parent component

<aura:component>

<c:childcomponent1 />

<c:childcomponent2 />

<c:childcomponent3 />

</aura:component/>