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.

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" />

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().

• Component Handling Its Own Event

  A component can handle its own event by using the <aura:handler> tag in its markup.

• Handle Component Event of Instantiated Component

  A parent component can set a handler action when it instantiates a child component in its markup.

• Handling Bubbled or Captured Component Events

  Event propagation rules determine which components in the containment hierarchy can handle events by default in the bubble or capture phases. Learn about the rules and how to handle events in the bubble or capture phases.

• Handling Component Events Dynamically

  A component can have its handler bound dynamically via JavaScript. This is useful if a component is created in JavaScript on the client-side.

See Also

• Component Event Propagation
• Handling Application Events

j

Introducing Aura Components

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

Debugging

Performance

Reference

Previous PDF Versions