Lightning Aura Components Developer Guide

What Is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Supported JavaScript
Invoking Actions on Component Initialization
Sharing JavaScript Code in a Component Bundle
Sharing JavaScript Code Across Components
Using External JavaScript Libraries
Dynamically Creating Components
Detecting Data Changes with Change Handlers
Finding Components by ID
Working with Attribute Values in JavaScript
Working with a Component Body in JavaScript
Working with Events in JavaScript
Modifying the DOM
Checking Component Validity
Modifying Components Outside the Framework Lifecycle
Throwing and Handling Errors
Calling Component Methods
Dynamically Adding Event Handlers To a Component
Dynamically Showing or Hiding Markup
Adding and Removing Styles
Which Button Was Pressed?
Formatting Dates in JavaScript
Using JavaScript Promises
Making API Calls from Components
Create CSP Trusted Sites to Access Third-Party APIs
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

Dynamically Adding Event Handlers To a Component

You can dynamically add a handler for an event that a component fires.

The addEventHandler() method in the Component object replaces the deprecated addHandler() method.

To add an event handler to a component dynamically, use the addEventHandler() method.

event
The first argument is the name of the event that triggers the handler. You can’t force a component to start firing events that it doesn’t fire, so make sure that this argument corresponds to an event that the component fires. The <aura:registerEvent> tag in a component’s markup advertises an event that the component fires.
  • For a component event, set this argument to match the name attribute of the <aura:registerEvent> tag.
  • For an application event, set this argument to match the event descriptor in the format namespace:eventName.
handler
The second argument is the action that handles the event. The format is similar to the value you would put in the action attribute in the <aura:handler> tag if the handler was statically defined in the markup. There are two options for this argument.
  • To use a controller action, use the format: cmp.getReference("c.actionName").
  • To use an anonymous function, use the format:

For a description of the other arguments, see the JavaScript API in the Aura Reference app.

You can also add an event handler to a component that is created dynamically in the callback function of $A.createComponent(). For more information, see Dynamically Creating Components.

Example

This component has buttons to fire and handle a component event and an application event.

Here’s the client-side controller.

Notice the first parameter of the addEventHandler() calls. The syntax for a component event is:

The syntax for an application event is:

For either a component or application event, you can use an anonymous function as a handler instead of using cmp.getReference() for a controller action.

For example, the application event handler could be: