Standard events are built-in browser events like click or change, while custom events are events that you define and dispatch yourself.

 

          Types of Events in LWC

LWC provides two main types of events: standard events and custom events. Standard events are pre-built by the LWC framework and can be used to handle common user interactions like clicks, inputs, and changes. Custom events, on the other hand, are defined by developers and can be used to trigger actions or communicate between components in a more specific and tailored way. Understanding the differences between these event types is crucial for building effective LWC components. In this section, we’ll explore both standard and custom events in LWC in more detail and provide examples of how to use them.

1. Standard Events in LWC

Some examples of standard events in LWC include “click”, “input”, and “change”. The “click” event is triggered when the user clicks on an element in the component, while the “input” event is triggered when the user types something into an input field. The “change” event is similar to “input”, but is only triggered when the user changes the input value (as opposed to every time a key is pressed).

Click Event

To handle the “click” event on a button element in the component’s template, you can add the following code:

HTML

<lightning-button label="Click Me!" onclick={handleClick}></lightning-button>

In the component’s JavaScript file, you would define the “handleClick” method to handle the event:

JavaScript

handleClick(event) {
  // Handle the click event here
}

Submit Event

To handle the “submit” event on a form element in the component’s template, you can add the following code:

HTML

<lightning-record-edit-form object-api-name="Account" onsubmit={handleSubmit}>
  <!-- Form fields go here -->
</lightning-record-edit-form>

In the component’s JavaScript file, you would define the “handleSubmit” method to handle the event:

JavaScript

handleSubmit(event) {
  // Handle the form submit event here
}

Change Event

To handle the “input” event on an input element in the component’s template, you can add the following code:

HTML

<lightning-input type="text" label="Enter text" onchange={handleInputChange}></lightning-input>

In the component’s JavaScript file, you would define the “handleInputChange” method to handle the event:

JavaScript

handleInputChange(event) {
  // Handle the input change event here
}

2. Custom Events in LWC

Custom events are a powerful way to communicate between different components within an LWC application. By defining and dispatching custom events, you can pass data and trigger actions between components, even if they are not directly related to the component tree.

You can do this using the standard CustomEvent constructor, like this:

JavaScript

const myEvent = new CustomEvent('mycustomevent', {
  detail: {
    // Data to pass along with the event
  }
});

In this example, the event object is named “myEvent” and has a type of “mycustomevent”. The detail property is used to pass data along with the event and can be any type of data that can be serialized to JSON.

Once you’ve defined the custom event object, you can dispatch it from the component using the dispatchEvent method:

JavaScript

this.dispatchEvent(myEvent);

In this example, the event is dispatched from the current component using the this keyword. You can also dispatch the event from a different component by passing a reference to the target component as an argument to dispatchEvent.

Event Handling in LWC

Handling events is a fundamental part of building Lightning Web Components (LWC). Events are used to capture user interactions, respond to changes in data, and communicate between different parts of your application. In this section, we’ll cover the basics of handling events in LWC.

One common scenario where event handlers are used is to pass data between components. For example, you may have a parent component that contains multiple child components, and you want to pass data from one child component to another. To do this, you can define a custom event in the child component that contains the data to be passed, and then dispatch that event from the child component. The parent component can then handle the event and update the state of the other child component with the new data.

Here’s an example of how to do this:

ChildComponent.html

<template>
  <lightning-input label="Enter data" onchange={handleChange}></lightning-input>
</template>

ChildComponent.js

handleChange(event) {
  const data = event.target.value;
  const customEvent = new CustomEvent('mycustomevent', { detail: { data } });
  this.dispatchEvent(customEvent);
}

ParentComponent.html

<template>
  <c-child-component onmycustomevent={handleCustomEvent}></c-child-component>
  <c-other-component data={myData}></c-other-component>
</template>

ParentComponent.js

handleCustomEvent(event) {
  this.myData = event.detail.data;
}
Conclusion
Event handling is crucial for building dynamic Lightning Web Components (LWC). Whether you're passing data between components or responding to user interactions, mastering event handling enhances your development skills. Keep coding, keep learning, and let your creativity shine through your LWC creations. Happy coding!

Gopesh Kumar.