Use:

Facilitate communication between child and parent components.

Trigger actions in response to user interactions or other events.

Pass data between components in a structured manner.

Maintain a decoupled architecture where components do not directly depend on each other.

parentComponent.html

<template>
    <div>
        <c-child-component oncustombuttonclick={handleCustomButtonClick}></c-child-component>
        <p if:true={message}>{message}</p>
    </div>
</template>

parentComponent.js

import { LightningElement, track } from 'lwc';

export default class ParentComponent extends LightningElement {
    @track message;

    handleCustomButtonClick(event) {
        this.message = event.detail;
    }
}

childComponent.html

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

childComponent.js

import { LightningElement } from 'lwc';

export default class ChildComponent extends LightningElement {
    handleClick() {
        const event = new CustomEvent('custombuttonclick', {
            detail: 'Button clicked in child component'
        });
        this.dispatchEvent(event);
    }
}

Custom Events in LWC are a powerful feature that enables seamless communication between components. By leveraging custom events, you can create highly interactive and responsive applications with a clean and modular structure. The example provided demonstrates how to dispatch and handle custom events, facilitating data exchange and interaction between a child and parent component. Understanding and utilizing custom events effectively will help you build more dynamic and maintainable LWC applications.
Happy Coding!