How to Pass Additional Data via Custom Events in JavaScript?

To pass additional data via custom events in JavaScript, we can pass an object into the CustomEvent constructor.

For instance, we can write:

window.addEventListener("MyEvent", (evt) => {
  console.log(evt.detail);
});

const evt = new CustomEvent("MyEvent", {
  detail: "Any Object Here"
});
window.dispatchEvent(evt);

to listen to the MyEvent event with the window.addEventListener method.

In the event handler, we log the value of the evt.detail property, which will be set when we pass in an object into the CustomEvent constructor’s 2nd argument with the detail property.

The first argument of the CustomEvent constructor is the event name.

Finally, we call window.dispatchEvent with the evt object to emit the event.

Therefore, we should see 'Any Object Here' logged from the event handler.