Lightning: Advanced Events Example

This example is built on the simpler component and application event examples. It uses one notifier component and one handler component that work with both component and application events.

	<!--c:compEvent-->
	<aura:event type="COMPONENT">
	<!-- pass context of where the event was fired to the handler. -->
	<aura:attribute name="context" type="String"/>
	</aura:event>
	<!--c:appEvent-->
	<aura:event type="APPLICATION">
	<!-- pass context of where the event was fired to the handler. -->
	<aura:attribute name="context" type="String"/>
	</aura:event>

view raw compEvent.evt hosted with ❤ by GitHub

	<!--c:eventsNotifier-->
	<aura:component>
	<aura:attribute name="parentName" type="String"/>
	<aura:registerEvent name="componentEventFired" type="c:compEvent"/>
	<aura:registerEvent name="appEvent" type="c:appEvent"/>
	<div>
	<h3>This is {!v.parentName}'s eventsNotifier.cmp instance</h3>
	<p>
	<lightning:button label="Click here to fire a component event" onclick="{!c.fireComponentEvent}" />
	</p>
	<p>
	<lightning:button label="Click here to fire an application event" onclick="{!c.fireApplicationEvent}" />
	</p>
	</div>
	</aura:component>
	/* eventsNotifierController.js */
	{
	fireComponentEvent : function(cmp, event) {
	var parentName = cmp.get("v.parentName");
	// Look up event by name, not by type
	var compEvents = cmp.getEvent("componentEventFired");
	compEvents.setParams({ "context" : parentName });
	compEvents.fire();
	},
	fireApplicationEvent : function(cmp, event) {
	var parentName = cmp.get("v.parentName");
	// note different syntax for getting application event
	var appEvent = $A.get("e.c:appEvent");
	appEvent.setParams({ "context" : parentName });
	appEvent.fire();
	}
	}
	/* eventsNotifier.css */
	.cEventsNotifier {
	display: block;
	margin: 10px;
	padding: 10px;
	border: 1px solid black;
	}

view raw eventsNotifier.cmp hosted with ❤ by GitHub

	<!--c:eventsHandler-->
	<aura:component>
	<aura:attribute name="name" type="String"/>
	<aura:attribute name="mostRecentEvent" type="String" default="Most recent event handled:"/>
	<aura:attribute name="numComponentEventsHandled" type="Integer" default="0"/>
	<aura:attribute name="numApplicationEventsHandled" type="Integer" default="0"/>
	<aura:handler event="c:appEvent" action="{!c.handleApplicationEventFired}"/>
	<aura:handler name="componentEventFired" event="c:compEvent" action="{!c.handleComponentEventFired}"/>
	<div>
	<h3>This is {!v.name}</h3>
	<p>{!v.mostRecentEvent}</p>
	<p># component events handled: {!v.numComponentEventsHandled}</p>
	<p># application events handled: {!v.numApplicationEventsHandled}</p>
	<c:eventsNotifier parentName="{#v.name}" />
	</div>
	</aura:component>
	/* eventsHandlerController.js */
	{
	handleComponentEventFired : function(cmp, event) {
	var context = event.getParam("context");
	cmp.set("v.mostRecentEvent",
	"Most recent event handled: COMPONENT event, from " + context);
	var numComponentEventsHandled =
	parseInt(cmp.get("v.numComponentEventsHandled")) + 1;
	cmp.set("v.numComponentEventsHandled", numComponentEventsHandled);
	},
	handleApplicationEventFired : function(cmp, event) {
	var context = event.getParam("context");
	cmp.set("v.mostRecentEvent",
	"Most recent event handled: APPLICATION event, from " + context);
	var numApplicationEventsHandled =
	parseInt(cmp.get("v.numApplicationEventsHandled")) + 1;
	cmp.set("v.numApplicationEventsHandled", numApplicationEventsHandled);
	}
	}
	/* eventsHandler.css */
	.cEventsHandler {
	display: block;
	margin: 10px;
	padding: 10px;
	border: 1px solid black;
	}

view raw eventsHandler.cmp hosted with ❤ by GitHub

	<aura:application extends="force:slds">
	<c:eventsHandler name="eventsHandler1"/>
	<c:eventsHandler name="eventsHandler2"/>
	</aura:application>

view raw eventsContainer.app hosted with ❤ by GitHub

Reference: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_demo.htm