In the JavaScript class for a component, create and dispatch events. Use the CustomEvent() function Object() { [native code] } to create an event. Call the EventTarget.dispatchEvent() function to dispatch an event.

 

CustomEvent() function Object()

The only necessary parameter for the CustomEvent() function Object() { [native code] } is a string identifying the event type. When you create the event as a component author, you give the event type a name. Any string may be used as your event type. But we advise that you adhere to the DOM event protocol.

• Without capital letters
• Zero spaces
• To divide words, use underscores

Because inline event handler names must begin with the string on, avoid prefixing your event name with the string on. The markup for your event would be c-my-component ononmessage=handleMessage> if it is called onmessage. Onon has been doubled, which is puzzling.

 

EventTarget.dispatchEvent() function

Let’s start writing some code.

There are buttons labelled Previous and Next on the c-wgpaginator component. The component creates and delivers previous and subsequent events in response to a user clicking the buttons. Any component that requires Previous and Next buttons can be given the paginator component by dragging it there. The parent component handles the events by listening for them.

 

<!– wgpaginator.html –>

<template>

<lightning-layout>

<lightning-layout-item>

<lightning-button label=”Previous” icon-name=”utility:chevronleft” onclick={previousHandler}></lightning-button>

</lightning-layout-item>

<lightning-layout-item flexibility=”grow”></lightning-layout-item>

<lightning-layout-item>

<lightning-button label=”Next” icon-name=”utility:chevronright” icon-position=”right” onclick={nextHandler}></lightning-button>

</lightning-layout-item>

</lightning-layout>

</template>

 

 

The previousHandler or nextHandler function runs when a user clicks a button. The previous and subsequent events are created and dispatched by these functions.

 

// wgpaginator.js

import { LightningElement } from ‘lwc’;

 

export default class WgPaginator extends LightningElement {

previousHandler() {

this.dispatchEvent(new CustomEvent(‘previous’));

}

 

nextHandler() {

this.dispatchEvent(new CustomEvent(‘next’));

}

}

 

These are just straightforward “something happened” incidents. They merely signal that a user clicked a button rather than sending any data up the DOM tree.

 

Src – https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events_create_dispatch

 

Conclusion

In this way, we can use CustomEvent() object to create custom javascript events in the component and to send out the events we use dispatch method.

 

Additional Resources

• Pass Data in an Event
• Salesforce Developers: Create and Dispatch Events

Cover Photo by Kelly Sikkema on Unsplash