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

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

CustomEvent CustomEvent creates named events with optional detail data.

detail detail carries event-specific data to listeners.