Custom Events

You can create and dispatch your own events using CustomEvent. This lets components communicate without tight coupling — a powerful pattern for large applications.

const event = new CustomEvent("userLoggedIn", {
  detail: { username: "alice" }
});

document.addEventListener("userLoggedIn", e => {
  console.log("Welcome,", e.detail.username);
});

document.dispatchEvent(event); // "Welcome, alice"

FINAL CHALLENGE

Print the three steps of working with custom events: create, listen, dispatch (each on its own line).

Need a hint?

Three console.log calls for "create", "listen", "dispatch".

Expected Output:

create
listen
dispatch