Event handling in LWC allows you to capture and respond to various events triggered by user interactions or system events. Here’s a guide on how to handle events in Lightning Web Components:
1. Handling DOM Events:
You can handle standard DOM events like click, change, input, etc., directly in your HTML template.
Example:
<template>
<button onclick={handleClick}>Click Me</button>
</template>
import { LightningElement } from 'lwc';
export default class MyComponent extends LightningElement {
handleClick() {
console.log('Button clicked!');
}
}
2. Dispatching Custom Events:
You can dispatch custom events to communicate between components or trigger actions within a component.
Example:
<template>
<button onclick={handleButtonClick}>Click Me</button>
</template>
import { LightningElement } from 'lwc';
export default class MyComponent extends LightningElement {
handleButtonClick() {
// Dispatch custom event
this.dispatchEvent(new CustomEvent('customclick'));
}
}
In the parent component, you can listen for this custom event:
<template>
<c-my-component oncustomclick={handleCustomClick}></c-my-component>
</template>
import { LightningElement } from 'lwc';
export default class ParentComponent extends LightningElement {
handleCustomClick() {
console.log('Custom button clicked!');
}
}
3. Event Bubbling and Capturing:
LWC supports event bubbling and capturing, similar to standard DOM events.
Example:
<template>
<div onclick={handleDivClick}>
<button>Click Me</button>
</div>
</template>
import { LightningElement } from 'lwc';
export default class MyComponent extends LightningElement {
handleDivClick() {
console.log('Div clicked!');
}
}
4. Preventing Default Behavior:
You can prevent the default behavior of an event using event.preventDefault().
Example:
<template>
<a href="https://www.example.com" onclick={handleLinkClick}>Click Me</a>
</template>
import { LightningElement } from 'lwc';
export default class MyComponent extends LightningElement {
handleLinkClick(event) {
event.preventDefault();
console.log('Link clicked!');
}
}
5. Passing Data with Events:
You can pass data along with custom events using the detail property.
Example:
handleButtonClick() {
const eventData = { message: 'Hello from child component!' };
this.dispatchEvent(new CustomEvent('customclick', { detail: eventData }));
}
In the parent component:
<template>
<c-my-component oncustomclick={handleCustomClick}></c-my-component>
</template>
handleCustomClick(event) {
const message = event.detail.message;
console.log('Received message:', message);
}
This covers the basics of event handling in Lightning Web Components. You can explore more advanced topics like component events, lifecycle hooks, and imperative event handling as you become more familiar with LWC development.
SFDC Arjuna 