Lighting Component Events Demo

CompEventLifecycleApp.app

<aura:application extends="force:slds">
    <aura:attribute name="globalId" type="String" />
    <aura:registerEvent name="compEvent" type="c:LightningComponentEvent"></aura:registerEvent>
    <aura:handler name="compEvent" event="c:LightningComponentEvent" action="{!c.handleEvent}" phase="bubble"></aura:handler>
    <aura:handler name="compEvent" event="c:LightningComponentEvent" action="{!c.handleEventCapture}" phase="capture"></aura:handler>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
	<lightning:layout multipleRows="true">
        <lightning:layoutItem size="12" padding="around-small">
        	Application: {!v.globalId} 
        </lightning:layoutItem>
        <lightning:layoutItem size="12" padding="around-small">
        	<lightning:button aura:id="sendEvt" onclick="{!c.sendEvent}" label="Send Event"></lightning:button>
        </lightning:layoutItem>
    	<lightning:layoutItem padding="around-small" size="6">
            <c:CompEventLifecycleComponentOuter></c:CompEventLifecycleComponentOuter>
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small" size="6">
            <c:CompEventLifecycleComponentOuter></c:CompEventLifecycleComponentOuter>
        </lightning:layoutItem>
    </lightning:layout>
</aura:application>

CompEventLifecycleAppController.js

({
    doInit: function (component) {
        component.set('v.globalId', component.getGlobalId());
    },
	sendEvent : function(component, event, helper) {
        var evt = component.getEvent('compEvent');
        evt.fire();
	},
    handleEvent: function (component, event, helper) {
        console.log('event in bubble phase received by application: ' + component.getGlobalId());
    },
    handleEventCapture: function (component, event, helper) {
        console.log('event in capture phase received by application: ' + component.getGlobalId());
    }
})

CompEventLifecycleComponentInner.cmp

<aura:component>
    <aura:attribute name="globalId" type="String"/>
    <aura:registerEvent name="compEvent" type="c:LightningComponentEvent"></aura:registerEvent>
    <aura:handler name="compEvent" event="c:LightningComponentEvent" action="{!c.handleEventCapture}" phase="capture"></aura:handler>
    <aura:handler name="compEvent" event="c:LightningComponentEvent" action="{!c.handleEvent}" phase="bubble"></aura:handler>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:layout multipleRows="true">
        <lightning:layoutItem size="12" padding="around-small">
        	Component: {!v.globalId}
        </lightning:layoutItem>
    	<lightning:layoutItem size="12" padding="around-small">
        	<lightning:button aura:id="sendEvt" onclick="{!c.sendEvent}" label="Send Event"></lightning:button>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

CompEventLifecycleComponentInner.css

.THIS {
    background-color: #999
}

CompEventLifecycleComponentInnerController.js

({
    doInit: function (component, event, helper) {
        component.set('v.globalId', component.getGlobalId());
    },
	sendEvent : function(component, event, helper) {
        var evt = component.getEvent("compEvent");
        evt.fire();
	},
    handleEvent: function (component, event, helper) {
        console.log('event in bubble phase received by inner controller: ' + component.getGlobalId());
    },
    handleEventCapture: function (component, event, helper) {
        console.log('event in capture phase received by inner controller: ' + component.getGlobalId());
    }
})

CompEventLifecycleComponentOuter.cmp

<aura:component>
    <aura:attribute name="globalId" type="String"/>
    <aura:registerEvent name="compEvent" type="c:LightningComponentEvent"></aura:registerEvent>
    <aura:handler name="compEvent" event="c:LightningComponentEvent" action="{!c.handleEvent}" phase="capture"></aura:handler>
    <aura:handler name="compEvent" event="c:LightningComponentEvent" action="{!c.handleEventBubble}" phase="bubble"></aura:handler>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
	<lightning:layout multipleRows="true">
        <lightning:layoutItem size="12" padding="around-small">
        	Component: {!v.globalId}
        </lightning:layoutItem>
    	<lightning:layoutItem size="12" padding="around-small">
        	<lightning:button aura:id="sendEvt" label="Send Event" onclick="{!c.sendEvent}"></lightning:button>
        </lightning:layoutItem>
        <lightning:layoutItem size="6" padding="around-small">
        	<c:CompEventLifecycleComponentInner></c:CompEventLifecycleComponentInner>
        </lightning:layoutItem>
        <lightning:layoutItem size="6" padding="around-small">
        	<c:CompEventLifecycleComponentInner></c:CompEventLifecycleComponentInner>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

CompEventLifecycleComponentOuter.css

.THIS {
    background-color: #bbb
}

CompEventLifecycleComponentOuterController.js

({
    doInit: function (component) {
        component.set('v.globalId', component.getGlobalId());
    },
	sendEvent : function(component, event, helper) {
        var evt = component.getEvent('compEvent');
        evt.fire();
	},
    handleEvent: function (component, event, helper) {
        console.log('event in capture phase received by outer controller: ' + component.getGlobalId());
        event.stopPropagation();
    },
    handleEventBubble: function (component, event, helper) {
        console.log('event in bubble phase received by outer controller: ' + component.getGlobalId());
    }
})

LightningComponentEvent.evt

<aura:event type="COMPONENT" description="Event template" />