Lightning Cmp Event Handler with Attribute:

This chapter explains about how to pass data using events in salesforce lightning

Attribute can be defined inside event , attribute can be set by the firing component and those valeus can be retrieved by the handler component


In lightning component event handling invovles registering events and handling events

Event Firing :
Declare event 

<aura:registerEvent name="any event name" type="c: Event created name"/>

Then fire this event in js :
var compEvent=component.getEvent("DemoParamCompEventName");
// access the app event using event source name , here shivalight is my namespace
appEvent.setParams({"event attribute name": " value ","another attribute name":" value "});
appEvent.fire();

Here attribute name is the name present in event while creation


Event Handling :

Register handler can handle the app event fired from any of the component loaded at that time

Fetch Param from the event during event handling 

var varName=event.getParam("attribute name");
var varName2=event.getParam("attribute name");
    
event.getParam("attribute name") is the syntax to get the attribute name from the event

The below program shows an example of event handling using parameter

Create the Lightning Event as below  and save it as DemoEmptyAppEvent

<aura:event type="COMPONENT" description="Event template" >
    <aura:attribute type="String" name="message"></aura:attribute>
    <aura:attribute type="Integer" name="countValue"></aura:attribute>

</aura:event>

Create Lightning Component and name it as ParamEventFiringChildComp_Cmp

<!--


 * created by 		:		Shiva RV
 * Date				:		14-10-2018
 * Description		:		Hello World Paramter Comp Event Firing Child
  
-->

<aura:component >
    
       <!-- start of Attribute declaration -->
     <aura:attribute type="String" name="message" default="hello default value"></aura:attribute>
    <aura:attribute type="Integer" name="countValue" default="1"></aura:attribute>
    <!-- end of Attribute declaration -->
    <!-- Register Event in the component which fires the event -->
    <aura:registerEvent name="DemoParamCompEventName" type="c:DemoNonEmptyCompEvent"/>
    <lightning:input name="userInput" value="" label="Your Input Text" aura:id="userInput"/>

	<lightning:button label = "FireEvent" variant="brand" onclick = "{!c.fireEventClick}" />

</aura:component>
ParamEventFiringChildComp_Js Js Controller Code:
({
	fireEventClick : function(component, event, helper) {
        //use the event name in the registered event to get the event in js
		var compEvent=component.getEvent("DemoParamCompEventName");
        var userInput=component.find("userInput").get("v.value");
        if(!userInput)
            userInput="no event";
        compEvent.setParams({"message":userInput,"countValue":component.get("v.countValue")});
        component.set("v.countValue",component.get("v.countValue")+1);
        console.log("Component event with message and count value is fired in child comp");
        compEvent.fire();
	},
})

Create Lightning Component and name it as HandlingParamEventParent

Note that the child component is instantiated in parent and onclick of the childcomponent button ,an event is fired with event parameter set
On event handler, the parent get's the event param and set it's value as the same

<!--


 * created by 		:		Shiva RV
 * Date				:		14-10-2018
 * Description		:		hybrid Event Handling Parent
  
-->


<aura:component >
	  <!-- start of Attribute declaration -->
     <aura:attribute type="String" name="message" ></aura:attribute>
    <aura:attribute type="Integer" name="countValue"></aura:attribute>
    <!-- Register Event -->

    <!-- End Of Register Event -->
    
    <!-- Event Handler -->
	<aura:handler name="DemoParamCompEventName" event="c:DemoNonEmptyCompEvent"
    action="{!c.handleParamCmpEvent}"  />    
    <!-- End Of Handler -->
	Event String Data Passed from Child through Comp Event --- {!v.message} 
    <br/>
    Event Input Data Passed Data passed from Child through Comp Event --- 
    {!v.countValue}
    <c:ParamEventFiringChildCmp></c:ParamEventFiringChildCmp>
</aura:component>
EventHandlingParent_AppType Js Controller Code:
({
	handleParamCmpEvent : function(component, event, helper) {
		//fetch parameters from event
		//use event.getParam to get the input from the event
		var eventParamMessageData=event.getParam("message");
        var eventParamInputData=event.getParam("countValue");
        
        //set the event data to the component's attributes
		component.set("v.message",eventParamMessageData);
        component.set("v.countValue",eventParamInputData);
	}
})
Below is the hello world App code:
<!--


 * created by 		:		Shiva RV
 * Date				:		13-10-2018
 * Description		:		Hello World Lighting App
  
-->

<aura:application extends="force:slds">
 <!-- Aura:Event With Parameter and Attribute Usage -->
		<c:HandlingParamEventParent></c:HandlingParamEventParent>
</aura:application>
Output:

Key Notes :
*This chapter explains about the parameter usage in lightning event