Events in Lightning

 Events in Lightning

1. What are Events in Lightning? 

Ans: In Lightning we have Events like System Events, Application Events, Component Events

* Events are used to communicate between the components.

* In Lightning framework, to setup communication between components we make use of Lightning Events.

* If Lightning component has to communicate to the upper level in it's hierarchy i.e to it's parent or grand parent or great grand parent then we use Component Events.

* In Component Events communication has to be done to it's higher hierarchy.

* In Component Event we have two phases 

• Capture Phase: It starts from Application root and ends with Source Component.
• Bubble Phase:  It starts from Source Component and moves to Apllication root.

Steps for Component Event

1. First we have to Register the Event.

            How to Register an Event

               <aura:registerEvent   name="Name of registration"  

                                                    type="c:componentEventName" />

      2.Fire the Event

            For Firing we need to follow steps

1. Get a Reference to Component Event, by using                                                                               Var cmpEvt= component.getEvent("here we have to pass name of registerEvent");
2. Set the attribute values using                                                               cmpEvent.setParams([]);
3. Fire the Event using                                                                                                                      cmpEvent.fire();                                                                                                      

     3.Handle the Event (Based on the Event, decide which component should handle it. Source component can also handles the Event if we want)

<aura:handler name="name is registerEvent name "   event="c:Name of event"  action="{! action while you handling}"   phase="capture" />

* The name of <aura:handler> must match the name of <aura:registerEvent>

•  By default it should be in bubble phase.

In handler controller read the attribute value that is defined in Component Event using, event.getParam

event.getSource(): It helps to determine which component fired an event. Let us say we have several buttons(New, Edit, Delete) that reuse the same onclick handler. To know which button has fired the event we use getSource.

    event.getSource().get("v.name").

event.pause(), event.resume(): To pause and resume the events we use this functions.

event.stopPropagation(): To stop event propagation.

                                                                 Events in Lightning.

* If we want send the information from Parent to Child component we use Attributes 

* If we want send information from Child to Parent component we use Events.

• Application Event : Application events are used when you need two independent component to communicate with each other i.e they don't need to be in the hierarchy or nested with each other.Applicaton events are handled by all components that are listening to the event

1.  How to define Application Event

        <aura:event type="APPLICATION">

• How to Register Event

            <aura:registerEvent name="Name of register event" type="AppEvent Name" />

• How to get application event in controller                                                                                                   var appEvt = $A.get("e.c:name of app event");
• Fire the Event using appEvt.fire();

• Handling the AppEvent

       <aura:handler name="c:AppEvent name"   action="{!c.action to perform when handling}"/>

• System Events: System Events are fired automatically by the lightning framework such as during component initialization, attribute value change, rendering etc.                                                            
• aura:valueRender     Indicates that an app or component has been rendered or rerendered
• aura:valueInit            Indicates that an app or component has been initialized.
• aura:valueDestroy    Indicates that component has been destroyed
• aura:valueChange     Indicates that an attribute value has changed
• aura:systemError      Indicates that an error has occured.