Component events vs Application events (component.getEvent vs $A.get)

I am new to lightning experience and components. I have been through some blogs and code that guide through the basics, but other than that I haven't had much hands-on experience.

My question is:

When to use component events vs application events? If I have nested components (parent & child) and if the events are of type Component, will the parent be able to handle events fired from child, and vice versa?

Also, I've noticed there are two ways to get an instance of an event (say TestEvent) -

    component.getEvent("TestEvent");

and

    $A.get("e.c:TestEvent");

Is there any difference between the both? What do "$A" & "e" in the second form, represent?

 vote

12down voteaccepted

Component events: to talk to a parent using the capture and bubbling mechanism, like with DOM events. Usually, one component is interested by the event, like an event aggregator.

Application events: to broadcast to other components and not exclusively ancestors. Applications events can talk to many components that can be interested by the event. The broadcast can be boxed to an area of the DOM (everything below a DIV for example).

About $A.getEvt() & cmp.getEvent():

Events have been seriously revamped, and the distinction between Component and Application events has been reduced. However, this rework has not yet been translated into an updated API.

I need to remove references to the $A.getEvt() and cmp.getEvent() API because we are still working on a new version of the API. My apologies for the confusion.

About value providers:

Lightning has various value providers: "v" for attributes, "c" for controller, and "e" for events.

Application Event API:

Those are obtained from the global (hence $A.get()) event value provider:

var evt = $A.get("e.myNamespace:myEvent");

Component Event API:

Component must reference events by name, much like an aura:id, and retrieve them from its component (hence cmp.get()) value provider:

var evt = cmp.get("e.myEvent");

You would then declare myEvent on the component as:

<aura:registerEvent name="myEvent" type="namespace:eventName"/>

Why dow have this API? Declaring events on a component allows other components to call controller methods. You had to declare a handler:

<aura:handler name="myEvent" action="{!c.myEventHandler}"/>

That allowed you to call myEventHandler from another component and respect the interface:

cmp.get("e.myEvent").fire();

up vote1down vote

Component Events follow Event Bubbling Mechanism .

Lets understand with an example component from salesforce docs

<!--c:eventBubblingParent-->
<aura:component>
  <c:eventBubblingChild>
    <c:eventBubblingGrandchild />
  </c:eventBubblingChild>
</aura:component>

In the above example lets say eventBubblingGrandchild component fired an event ,the event then bubbles up and can be handled by a component in the containment hierarchy that receives the bubbled event.

The syntax to handle this is

 component.getEvent("TestEvent");

A containment hierarchy in this case is not c:eventBubblingChild instead it is c:eventBubblingParent .The event is not handled by c:eventBubblingChild as c:eventBubblingChild is in the markup for c:eventBubblingParent but it's not a facet value provider as it's not the outermost component in that markup.

Application events can be handled by any component and does not depend on hierarchy .

The syntax to handle for this is

 $A.get("e.c:TestEvent");

Now to answer your question on parent to child as you can see you cannot use component events to fire from parent and handle in child while vise versa is true but the event bubbles only to the top containment .

----------------------------------------------------------------------------------------------------------

How to navigate from one lightning component to another lightning component?

You could move between view states by creating and replacing components.

Server-side Controller

public class LightningController {

    @AuraEnabled
    public static list<Account> getAccounts(){
        return [SELECT Id, Name FROM Account LIMIT 10];
    }

    @AuraEnabled
    public static list<Opportunity> getOpportunities(Id AccountId){
        return [SELECT Id, Name FROM Opportunity WHERE AccountId = :AccountId];
    }

}

App

<aura:application controller="LightningController" >
    <aura:attribute type="Account[]" name="AccountList" />
    <aura:handler name="init" value="{!this}" action="c.doInit" />
    <aura:handler event="analysis:ATOEvent" action="{!c.ato}" />
    <aura:handler event="analysis:OTAEvent" action="{!c.ota}" />
    {!v.body}
</aura:application>

App client-side controller

({
    doInit : function(component, event, helper){
        var action = component.get("c.getAccounts");
        action.setCallback(this,function(response){
                if (response.getState() === "SUCCESS"){
                    component.set("{!v.AccountList}",response.getReturnValue());
                    helper.generateAccountList(component);
                }
            }
        );
        $A.enqueueAction(action);
    },
    ato : function(component, event, helper){
        var action = component.get("c.getOpportunities");
        action.setParams({"AccountId" : event.getParam("AccountId")});
        action.setCallback(this,function(response){
                if (response.getState() === "SUCCESS"){
                    helper.generateOpportunityList(component, response.getReturnValue());
                }
            }
        );
        $A.enqueueAction(action);
    },
    ota : function(component, event, helper){
        helper.generateAccountList(component);
    }
})

App helper

({
    generateAccountList : function(component) {
        $A.createComponent(
            "analysis:AccountList",
            {
                "AccountList" : component.get("{!v.AccountList}")
            },
            function(newComponent){
                component.set("v.body",newComponent);
            }
        )    
    },
    generateOpportunityList : function(component, OpportunityList){
        $A.createComponent(
            "analysis:OpportunityList",
            {
                "OpportunityList" : OpportunityList
            },
            function(newComponent){
                component.set("v.body",newComponent);
            }
        )
    }
})

AccountList

<aura:component >
    <aura:registerEvent name="ATOEvent" type="analysis:ATOEvent" /> 
    <aura:attribute name="AccountList" type="Account[]" />
    <aura:iteration items="{!v.AccountList}" var="Account">
        <ui:outputText value="{!Account.Name}" />
        <ui:button label="go" press="c.fireato" buttonTitle="{!Account.Id}" />
        <br/>
    </aura:iteration>
</aura:component>

AccountListController

({
    fireato : function(component, event, helper) {
        var action = $A.get("e.analysis:ATOEvent");
        action.setParams({"AccountId" : event.getSource().get("{!v.buttonTitle}")});
        action.fire();
    }
})

OpportunityList

<aura:component >
    <aura:registerEvent name="OTAEvent" type="analysis:OTAEvent" /> 
    <aura:attribute type="Opportunity[]" name="OpportunityList" />
    <ui:button label="Go Back" press="c.fireota" />
    <aura:iteration items="{!v.OpportunityList}" var="Opportunity" >
        <br />
        <ui:outputText value="{!Opportunity.Name}" />
    </aura:iteration>
</aura:component>

OpportunityListController

({
    fireota : function(component, event, helper) {
        var action = $A.get("e.analysis:OTAEvent");
        action.fire();
    }
})

ATOEvent

<aura:event type="APPLICATION" description="ATOEvent" >
    <aura:attribute name="AccountId" type="Id" />
</aura:event>

OTAEvent

<aura:event type="APPLICATION" description="OTAEvent" />