Create and Dispatch Events In LWC!

To create an event, use the CustomEvent() constructor in your component's JavaScript class. 

Provide a string that indicates the event type as a required parameter. 

Following the DOM event standard when naming your event type is recommended:

- Avoid uppercase letters and spaces.

- Use underscores to separate words.

- Do not prefix your event name with the string "on" because inline event handler names must start with "on".

Let's look at an example:

Imagine a "c-paginator" component with Previous and Next buttons. 

When a user clicks these buttons, the component will create and dispatch previous and next events. 

You can easily drop this paginator component into any other component that needs similar buttons. 

The parent component will listen for these events and handle them accordingly.

Here's the code for the "c-paginator" component:

<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>

In this example, when a user clicks a button, either the previousHandler or nextHandler function will execute. 

These functions create and dispatch the previous and next events, respectively.

Here's the code for the "c-paginator" JavaScript class:

import { LightningElement } from "lwc";

export default class Paginator extends LightningElement {

  previousHandler() {

    this.dispatchEvent(new CustomEvent("previous"));

  }

  nextHandler() {

    this.dispatchEvent(new CustomEvent("next"));

  }

}

These events simply indicate that "something happened" when a user clicked a button and do not pass any data payload up the DOM tree.

Now, let's incorporate the "c-paginator" component into a component called "c-event-simple" that listens for and handles the previous and next events.

To listen for these events, use an HTML attribute with the syntax on[EventName]. 

In this case, the event types are "previous" and "next", so the listeners would be onprevious and onnext.

Here's the code for the "c-event-simple" component:

<template>

  <lightning-card title="EventSimple" icon-name="custom:custom9">

    <div class="slds-m-around_medium">

      <p class="slds-m-vertical_medium content">Page {page}</p>

      <c-paginator onprevious={previousHandler} onnext={nextHandler}></c-paginator>

    </div>

  </lightning-card>

</template>

When the "c-event-simple" component receives the previous and next events, the previousHandler and nextHandler functions will increase and decrease the page number accordingly.

Here's the code for the "c-event-simple" JavaScript class:

import { LightningElement } from "lwc";

export default class EventSimple extends LightningElement {

  page = 1;

  previousHandler() {

    if (this.page > 1) {

      this.page = this.page - 1;

    }

  }

  nextHandler() {

    this.page = this.page + 1;

  }

}

By using events, you can easily communicate between components and create interactive and dynamic experiences for users.