Component Event Bubbling

Event Bubbling Rules

A component event can't be handled by every parent in the containment hierarchy. Instead, it bubbles to every facet value provider in the containment hierarchy. A facet value provider is the outermost component containing the markup that references the component firing the event. Confused? It makes more sense when you look at an example.

c:eventBubblingParent contains c:eventBubblingChild, which in turn contains c:eventBubblingGrandchild.

1<!--c:eventBubblingParent-->
2<aura:component>
3    <c:eventBubblingChild>
4        <c:eventBubblingGrandchild />
5    </c:eventBubblingChild>
6</aura:component>

If c:eventBubblingGrandchild fires a component event, it can handle the event itself. The event then bubbles up the containment hierarchy. c:eventBubblingChild contains c:eventBubblingGrandchild but it's not the facet value provider as it's not the outermost component in the markup so it can't handle the bubbled event. c:eventBubblingParent is the facet value provider as c:eventBubblingChild is in its markup. c:eventBubblingParent can handle the event.

Handle Bubbled Event

1<aura:component>
2    <aura:registerEvent name="bubblingEvent" type="c:compEvent" />
3</aura:component>

1<aura:component>
2    <aura:handler name="bubblingEvent" event="c:compEvent" action="{!c.handleBubbling}"/>
3</aura:component>

Event Bubbling Example

Let's go through all the code for this example so you can play around with it yourself.

First, we define a simple component event.

1<!--c:compEvent-->
2<aura:event type="COMPONENT">
3    <!--simple event with no attributes-->
4</aura:event>

c:eventBubblingEmitter is the component that fires c:compEvent.

1<!--c:eventBubblingEmitter-->
2<aura:component>
3    <aura:registerEvent name="bubblingEvent" type="c:compEvent" />
4    <ui:button press="{!c.fireEvent}" label="Start Bubbling"/>
5</aura:component>

Here is the controller for c:eventBubblingEmitter. When you press the button, it fires the bubblingEvent event registered in the markup.

1/*eventBubblingEmitterController.js*/
2{
3    fireEvent : function(cmp) {
4        var cmpEvent = cmp.getEvent("bubblingEvent");
5        cmpEvent.fire();
6    }
7}

c:eventBubblingGrandchild contains c:eventBubblingEmitter and uses <aura:handler> to assign a handler for the event.

1<!--c:eventBubblingGrandchild-->
2<aura:component>
3    <aura:handler name="bubblingEvent" event="c:compEvent" action="{!c.handleBubbling}"/>
4
5    <div class="grandchild">
6        <c:eventBubblingEmitter />
7    </div>
8</aura:component>

Here is the controller for c:eventBubblingGrandchild.

1/*eventBubblingGrandchildController.js*/
2{
3    handleBubbling : function(component, event) {
4        console.log("Grandchild handler for " + event.getName());
5    }
6}

The controller logs the event name when the handler is called.

Here is the markup for c:eventBubblingChild. We will pass c:eventBubblingGrandchild in as the body of c:eventBubblingChild when we create c:eventBubblingParent later in this example.

1<!--c:eventBubblingChild-->
2<aura:component>
3    <aura:handler name="bubblingEvent" event="c:compEvent" action="{!c.handleBubbling}"/>
4
5    <div class="child">
6        {!v.body}
7    </div>
8</aura:component>

Here is the controller for c:eventBubblingChild.

1/*eventBubblingChildController.js*/
2{
3    handleBubbling : function(component, event) {
4        console.log("Child handler for " + event.getName());
5    }
6}

c:eventBubblingParent contains c:eventBubblingChild, which in turn contains c:eventBubblingGrandchild.

1<!--c:eventBubblingParent-->
2<aura:component>
3    <aura:handler name="bubblingEvent" event="c:compEvent" action="{!c.handleBubbling}"/>
4    
5    <div class="parent">
6        <c:eventBubblingChild>
7            <c:eventBubblingGrandchild />
8        </c:eventBubblingChild>
9    </div>
10</aura:component>

Here is the controller for c:eventBubblingParent.

1/*eventBubblingParentController.js*/
2{
3    handleBubbling : function(component, event) {
4        console.log("Parent handler for " + event.getName());
5    }
6}

Now, let’s see what happens when you run the code.

1. In your browser, navigate to c:eventBubblingParent. Create a .app resource that contains <c:eventBubblingParent />.
2. Click the Start Bubbling button that is part of the markup in c:eventBubblingEmitter.
3. Note the output in your browser's console:
   1Grandchild handler for bubblingEvent
   2Parent handler for bubblingEvent

The c:compEvent event is bubbled to c:eventBubblingGrandchild and c:eventBubblingParent as they are facet value providers in the containment hierarchy. The event is not handled by c:eventBubblingChild as c:eventBubblingChild is in the markup for c:eventBubblingParent but it's not a facet value provider as it's not the outermost component in that markup.

Stop Event Propagation

Use the stopPropagation() method in the Event object to stop the event bubbling to other components.

For example, edit the controller for c:eventBubblingGrandchild to stop propagation.

1/*eventBubblingGrandchildController.js*/
2{
3    handleBubbling : function(component, event) {
4        console.log("Grandchild handler for " + event.getName());
5        event.stopPropagation();
6    }
7}

Now, navigate to c:eventBubblingParent and click the Start Bubbling button.

Note the output in your browser's console:

1Grandchild handler for bubblingEvent

The event no longer bubbles up to the c:eventBubblingParent component.