Custom Event Message - JavaScript Client

One component dispatches a CustomEvent with detail data and another listener renders the message.

Program

CustomEvent lets separate parts of a page communicate with named events and structured detail payloads.

custom_event_message.html

Visuals: captured from real browser rendering

<button id="publish">Publish</button><output id="log">Idle</output>
<script>
  const log = document.querySelector("#log");
  document.addEventListener("deploy", event => {
    log.textContent = event.detail.message;
  });
  publish.addEventListener("click", () => {
    document.dispatchEvent(new CustomEvent("deploy", { detail: { message: "Published" } }));
  });
</script>

Find the output element.
The listener will update this output.
Listen for a custom deploy event.
The document is ready to receive a named event.
Read the event payload.
The listener uses the detail object instead of global state.
Use a button click as the source action.
A normal UI action starts the custom event.
Dispatch the custom event.
The deploy event carries its message to the listener.

CustomEvent CustomEvent creates named events with optional detail data.

detail detail carries event-specific data to listeners.