Custom Events in Lightning Web Components

Updated: May 3, 2020

Custom events are used for communication in lightning web components.


First, the comparison with Aura Components. 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


Create Custom Events 

To create an event in LWC, use CustomEvent CTOR, and use this.dispatchEvent to fire event. 

Code :- 

<!-- child.html -->
<template>
<lightning-button label="Create Event" icon-name="utility:upload" onclick={btnHandler}></lightning-button>
</template>

//child.js 

import { LightningElement} from 'lwc';

export default class childextends LightningElement {

   btnHandler(event){
this.dispatchEvent(new CustomEvent("uploadevent"));
   }}