Dispatching Custom Events in JavaScript

JavaScript allows you to create and dispatch custom events using the CustomEvent constructor. This lets you define and trigger your own events, passing custom data if needed.

🔹 Creating and Dispatching a Custom Event

We use document.dispatchEvent() or element.dispatchEvent() to trigger an event.

✔ Example 1: Creating a Simple Custom Event

// Create a custom event
let myEvent = new Event("myCustomEvent");

// Listen for the event
document.addEventListener("myCustomEvent", function() {
    console.log("Custom event triggered!");
});

// Dispatch the event
document.dispatchEvent(myEvent);

🛠 Effect: Logs "Custom event triggered!" when dispatched.

🔹 Using `CustomEvent` to Pass Data

We can pass extra data using CustomEvent and the detail property.

✔ Example 2: Custom Event with Data

// Create a custom event with data
let userLoggedIn = new CustomEvent("userLogin", {
    detail: { username: "JohnDoe", time: new Date() }
});

// Listen for the event
document.addEventListener("userLogin", function(event) {
    console.log("User logged in:", event.detail.username, "at", event.detail.time);
});

// Dispatch the event
document.dispatchEvent(userLoggedIn);

🛠 Effect: Logs "User logged in: JohnDoe at [current time]".

🔹 Dispatching Events on Specific Elements

We can attach events to elements and dispatch them specifically.

✔ Example 3: Dispatching on an HTML Element

let button = document.querySelector("button");

// Listen for the event on the button
button.addEventListener("customClick", function(event) {
    console.log("Custom click detected!", event.detail);
});

// Create and dispatch event
let event = new CustomEvent("customClick", { detail: { clicked: true } });
button.dispatchEvent(event);

🛠 Effect: Logs "Custom click detected!" when the event is dispatched on the button.

🔹 Bubbling and Event Propagation

By default, custom events don’t bubble. To enable bubbling:

✔ Example 4: Enable Event Bubbling

let customEvent = new CustomEvent("bubbleEvent", { bubbles: true });

document.body.addEventListener("bubbleEvent", function() {
    console.log("Bubbled up to body!");
});

// Dispatch event on a child element
document.querySelector("div").dispatchEvent(customEvent);

🛠 Effect: If the div is inside <body>, the event bubbles up and is detected by body.

🔹 Cancelling a Custom Event

Use event.preventDefault() and check event.defaultPrevented.

✔ Example 5: Preventing Default Behavior

let customEvent = new CustomEvent("cancelEvent", { cancelable: true });

document.addEventListener("cancelEvent", function(event) {
    event.preventDefault();  // Prevent default action
    console.log("Event was cancelled:", event.defaultPrevented);
});

// Dispatch event
document.dispatchEvent(customEvent);

🛠 Effect: Logs "Event was cancelled: true".

🔹 When to Use Custom Events?

✅ Component communication in JavaScript-based UI frameworks.
✅ Trigger custom actions when certain conditions are met.
✅ Pass data between different parts of an application.

🚀 Mastering custom events makes your web applications more dynamic and interactive!

Souy Soeng

Dispatching Custom Events in JavaScript