Events in LWC

Introduction to Events 

An event that fired by another lightning component or the component itself. Events is nothing but the way component is going to communicate with the other components. In this article, we can learn how to communicate within the components  

Why Events in LWC? 

  • Events are used to establish communication between components. 
  • To fire an event in the source component and this event will be handled by any other component depends on the type 

Steps to implement custom event 

  • Create & Dispatch Events 
  • Handle Events 
  • Communicate across DOM 

Why do we go for custom events? 

To exchange the data between interrelated components.  

Create & Dispatch Events 

Creating events to communicate from child to parent component. In this example, I created one custom event using this syntax:  

new Custom Event (event name, parameter name) 

Dispatching the events: 

While creating the custom event, we must mention the event name and parameter. Then trigger the event using dispatch (this. dispatch Event ()

In the below example, I have covered using two components  

Parent Component Name à Parent Event 

Child Component Name à Child Custom Event 


In this child component, I created a variable named ‘outputText’ with @track decorator. The variable ‘outputText’ helps to track the value given in the input box. Next, created the custom event in the name of ‘mycustomevent’ and passing the parameter named ‘detail’ and dispatch the events using ‘this. dispatchEvent’ 


The below screenshot represents the parent component of html page 

In this component, pass the data by mentioning the child component, custom event and method named ‘handleMessage’ 


In the below JS part, created a variable named ‘response’ with @track decorator. Created the method ‘handleMessage’ and passed the event as a parameter 


Here based on user input, it will display along with the text message 

Output will be: 

Handle Events 

Handle events are based on the user interaction with the element. 

E.g.: Onclick & Onchange  

Using Onclick event, called showSuccessToast () method. In that, it will display the success message when user clicks the ‘Welcome’ button 

In Onchange event, called handleChange () method. In that, when user submits a value in input box, it will just display the value  

Onclick & Onchange events 




Output will be: 

Communicate across DOM (DOCUMENT OBJECT MODEL) 

We can use Lightning Message Service (LMS) to communicate between components, if the components are not in the same DOM 

We are using LMS to communicate within a single lightning page and between Visualforce and between aura components to lightning components.  

Why do we go for Lightning Message Service? 

LMS is based on Lightning Message Channel. In LWC, we can use this scoped ‘@salesforce/messageChannel’.  We can communicate with VF page as well. To access the lightning message service, we must use global variable named ‘$MessageChannel.’ 

In the below example, I covered Lightning message service between two Lightning components. One is publisher component named ‘LMS Publisher Web Component ‘and another one is subscriber component named ‘LMS Subscriber Web Component.’ For communicating between the Publisher and Subscriber,  created one message channel named ‘My Message Channel.’ 

Here, it will display the list of Contact records. When a user selects a contact record, and it will publish the record details. 


We must import the message channel and the LMS functions in JS 

import {publish, MessageContext} from ‘lightning/messageService’ 

Here, using ‘handleContactSelect’ method to publish. The ‘publish ()’ has three parameters: 

publish (messageContext, MessageChannelname, Message). 


This is another component named ‘LMSSubscriberWebComponent’. In this, I am displaying the Contact record details.  


Here, we are receiving record Id from publisher component, and it will start the subscribe functions. We must import @salesforce/messageChannel 

We must import the message channel and the LMS functions in JS 

import {subscribe, MessageContext} from ‘lightning/messageService’ 

Here, used ‘handleMessage ()’ method to receive the record Id from the JSON message 


Output will be: 

If user clicks any contact record, it will show the details of the record. 

In Publisher component, displays the contact records 

In Subscriber component, displays the record details 

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.