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
childCustomEvent.html
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’
childCustomEvent.js
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’
parentEvent.html
In the below JS part, created a variable named ‘response’ with @track decorator. Created the method ‘handleMessage’ and passed the event as a parameter
parentEvent.js
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
Events.html
Events.js
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.
LMSPublisherWebComponent.html
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).
LMSPublisherWebComponent.Js
This is another component named ‘LMSSubscriberWebComponent’. In this, I am displaying the Contact record details.
LMSSubscriberWebComponent.html
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
LMSSubscriberWebComponent.JS
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
