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
Manage CSP Trusted Sites
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

Working with Events in JavaScript

These are useful and common patterns for working with events in JavaScript.

Events communicate data across components. Events can contain attributes with values set before the event is fired and read when the event is handled.

Fire an Event

Fire a component event or an application event that’s registered on a component.
For more information, see:

Get an Event Name

To get the name of the event that’s fired:

Get an Event Parameter

To get an attribute that’s passed into an event:

Get Parameters on an Event

To get all attributes that are passed into an event:

event.getParams() returns an object containing all event parameters.

Get the Current Phase of an Event

To get the current phase of an event:

If the event hasn’t been fired, event.getPhase() returns undefined. Possible return values for component and application events are capture, bubble, and default. Value events return default. For more information, see:

Get the Source Component

To get the component that fired the event:

To retrieve an attribute on the component that fired the event:

Pause the Event

To pause the fired event:

If paused, the event is not handled until event.resume() is called. You can pause an event in the capture or bubble phase only. For more information, see:

Prevent the Default Event Execution

To cancel the default action on the event:

For example, you can prevent a lightning:button component from submitting a form when it’s clicked.

Resume a Paused Event

To resume event handling for a paused event:

You can resume a paused event in the capture or bubble phase only. For more information, see:

Set a Value for an Event Parameter

To set a value for an event parameter:

If the event has already been fired, setting a parameter value has no effect on the event.

Set Values for Event Parameters

To set values for parameters on an event:

If the event has already been fired, setting the parameter values has no effect on the event.

Stop Event Propagation

To prevent further propagation of an event:

You can stop event propagation in the capture or bubble phase only.