An In-Depth Look at Lightning Component Events

1. Component Event is designed w.r.to DOM events.

2. Difference between Owner(Parent) component, Container component & child component. 

<!-- c:parentCmp -->

<aura:component>

    <c:containerCmp>

        <c:eventEmitterCmp>

    </c:containerCmp>

</aura:component>

3. By Default, component events will not bubble to the container component. If we want then we have to write like below in the container component. 

<!-- c:containerCmp -->

<aura:component>

    <aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEvent}" includeFacets="true"/>

    {!v.body}

</aura:component>

4. By default, the component works in a "bubble" phase, if we want to make it work in the "Capture" phase then we have to explicitly mention it.

5. When the component event is fired in the parent component, we can do
a. pause the event( in the parent controller). 
b. resume the event( on apex controller Success Response).

c. stop propagation (on apex controller Error Response)

handleCmpEvent : function(component, event, helper) {

  // Pause event propagation

  event.pause();

 

  // Call an asynchronous server-side action

  var action = component.get("c.someServerFunction");

  action.setCallback(this, function(response) {

    var state = response.getState();

    if (state === "SUCCESS") {

      // Resume event propagation if action succeeded

      event.resume();

    }

    else if (state === "ERROR") {

      // Stop event propagation if action failed

      event.stopPropagation();

    }

  });

  $A.enqueueAction(action);

}

Please read this article for more details : ClickHere