Lightning Aura Components Developer Guide

What Is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
Communicating with Events
Actions and Events
Handling Events with Client-Side Controllers
Component Events
Component Event Propagation
Create Custom Component Events
Fire Component Events
Handling Component Events
Component Handling Its Own Event
Handle Component Event of Instantiated Component
Handling Bubbled or Captured Component Events
Handling Component Events Dynamically
Component Event Example
Application Events
Event Handler Behavior for Active Components
Event Handling Lifecycle
Advanced Events Example
Firing Events from Non-Aura Code
Events Best Practices
Events Fired During the Rendering Lifecycle
Events Handled in the Salesforce Mobile App and Lightning Experience
System Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components with Lightning Testing Service
Debugging
Performance
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Handling Component Events

A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event.

Use <aura:handler> in the markup of the handler component. For example:

1<aura:handler name="sampleComponentEvent" event="c:compEvent"
2    action="{!c.handleComponentEvent}"/>

The name attribute in <aura:handler> must match the name attribute in the <aura:registerEvent> tag in the component that fires the event.

The action attribute of <aura:handler> sets the client-side controller action to handle the event.

The event attribute specifies the event being handled. The format is namespace:eventName.

In this example, when the event is fired, the handleComponentEvent client-side controller action is called.

Event Handling Phases

Component event handlers are associated with the bubble phase by default. To add a handler for the capture phase instead, use the phase attribute.

1<aura:handler name="sampleComponentEvent" event="ns:eventName"
2    action="{!c.handleComponentEvent}" phase="capture" />

Get the Source of an Event

In the client-side controller action for an <aura:handler> tag, use evt.getSource() to find out which component fired the event, where evt is a reference to the event. To retrieve the source element, use evt.getSource().getElement().