Migrate Events

Migrate component events in Aura components to standard DOM events in Lightning web components.

Here’s an overview for working with events in Lightning web components.

Create an event

Instead of the proprietary Event object in Aura components, use the Event or CustomEvent standard DOM objects. There's no equivalent in Lightning web components for the <aura:registerEvent> tag in Aura component markup to register that a component can fire an event.

Fire an event

Instead of event.fire() in an Aura component, use this.dispatchEvent(myEvent), which is a standard DOM method, in Lightning web components.

Handle an event

An Aura component uses the <aura:handler> tag in markup to define a handler. Alternatively a component can declare a handler action when it references another component in its markup. This Aura component uses c:child in its markup and declares a handleChildEvent handler for the sampleComponentEvent that c:child fires.

A Lightning web component can similarly declare a declarative handler. The event name in the declarative handler is prefixed by on.

<!-- prettier-ignore -->

The event handler function, handleChildEvent, is defined in the JavaScript file of the component.

In a Lightning web component, you can also programmatically set up a handler using the standard addEventListener() method in the component's JavaScript file.

Retrieve an event payload

Use the event.detail property to retrieve the event payload unless otherwise stated.

Use the Lightning message service (lightning/messageService) to communicate with components within a single page or across multiple pages. You can also use the pub-sub pattern to communicate between components within a single page.

This table maps standard Aura events, such as for navigating to a component or to display the record create panel, to usage in Lightning web components. Events that are not listed don’t currently have an equivalent in Lightning Web Components.

See Also

• Communicate with Events