Events and Communication in LWC

Events and Communication in LWC : Lightning web components dispatch standard DOM events. Components can also create and dispatch custom events. Use events to communicate up the component containment hierarchy. For example, a child component, example-todo-item, dispatches an event to tell its parent, example-todo-app, that a user selected it. Events in Lightning web components are built on DOM Events, a collection of APIs and objects available in every browser.

  • Lightning web components implement the EventTarget interface, which allows them to dispatch events, listen for events, and handle events.
  • In Aura component, we need to create a separate event file and need to register the event, where event is fired. Moreover, to handle the event, a handler is needed in component hierarchy. In LWC, registering of event is not required.

To create events, we strongly recommend using the CustomEvent interface instead of the Event interface. In Lightning web components, CustomEvent provides a more consistent experience across browsers, including Internet Explorer.

In Aura component, we need to create a separate event file and need to register the event, where event is fired. Moreover, to handle the event, a handler is needed in component hierarchy. In LWC, registering of event is not required. We can fire event programmatically, and defining handler to catch the event is optional, i.e. it can also be done programmatically.

LWC uses standard DOM events to create and dispatch events. The DOM events system is a programming design pattern that includes these elements.

  1. An event name, called a type
  2. A configuration to initialize the event
  3. A JavaScript object that emits the event

    For example – if you change the dispatch statement to this.dispatchEvent(new CustomEvent(“uploadEvent”)); code won’t work because the event name contain upper case letter.

1. Create an Event

We can use the customEvent() constructor to create an event. In constructor we need to pass custom event name and detail of the event. The only difference between event and customEvent() is that the CustomEvent class will allow us to store information in its detail property and thus transmit that information to the listeners of the event.

The customEvent constructor has one required parameter, which is a string indicating the event name. As a component author, we can name the event when we create the event. We can use any string as our event name.

However, recommendation is to follow DOM event standard.

  • No uppercase letters
  • No spaces
  • Use underscores to separate words

Don’t prefix event name with the string on.

new customEvent(eventName, props);

2. Dispatch an Event

Then, we can make an event target dispatch the created event invoking the dispatchEvent standard method.

this.dispatchEvent(new customEvent(eventName, props);

3. Handle an Event 

There are two ways to listen to an event.

  • Declaratively from the component’s HTML template
  • Programmatically using an imperative JavaScript API

It’s better to listen from the HTML template since it reduces the amount of code we need to write. To handle events, define methods in the component’s JavaScript class