Custom Events in Lightning Web Components

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"));
   }}

btnHandler function will create and fire a custom event named "uploadevent".

Catch Custom Event

Now in order to catch this event we need to write a handler, where we want to handle this event.

Code :- 

<!-- app.html -->
<template>
    Event Fired : <h1>{evtName}</h1>
 <c-child onuploadevent​={handleUpload}></c-child>
</template>



//app.js

import { LightningElement,track} from 'lwc';

export default class App extends LightningElement {
@track evtName;
    handleUpload(event){
 this.evtName='uploadevent';
    }}

Remember when defining the handler of the custom event. use "on" before event name. in this case event name is "uploadevent", so the we will define handler using "onuploadevent".

This code contain the child component, and one handler is present "onuploadevent". When child component dispatch an event, this handler will execute the function in parent component.

Remember to adhere to DOM event standard, which are -

1. No uppercase letters

2. No spaces

3. Use underscores to separate words

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.

How to pass values in Custom Event

in order to pass values in event, we need to create event using detail parameter. The detail parameter holds the values that need to be passed. 

From LWC documentation - 

WARNING : The CustomEvent interface imposes no type requirements or structure on the detail property. However it’s important to send only primitive data. JavaScript passes all data types by reference except for primitives. If a component includes an object in its detail property, any listener can mutate that object without the component’s knowledge. This is a bad thing! It’s a best practice either to send only primitives, or to copy data to a new object before adding it to the detail property. Copying the data to a new object ensures that you’re sending only the data you want, and that the receiver can’t mutate your data. 

Code :- 

//child.js
import { LightningElement} from 'lwc';

export default class Child extends LightningElement {

 btnHandler(event){
       var Fname="Saurabh";
       var Lname="Singh";
       var selectedEvent = new CustomEvent('uploadevent', { detail:        
                              {Fname : Fname, Lname : Lname}});
       // Dispatches the event.
       this.dispatchEvent(selectedEvent);
    }
}

//app.html
<c-child onuploadevent = {handleUpload}><c-child>


//app.js
import { LightningElement} from 'lwc';

export default class App extends LightningElement {
   handleUpload(event) {
      console.log(event.detail.Fname);
      console.log(event.detail.Lname);
   }
}

So, this is how a custom event can be created and passed to it's parent components. There are more things in LWC event, which I'll describe in different blogs.