DOM Events Triggering custom events


The CustomEvent API allows developers to create custom events and trigger them on DOM nodes, passing data along the way.

event = new CustomEvent(typeArg, customEventInit);

typeArg - DOMString representing the name of the event.

customEventInit - is optional parameters (that will be passed as e in following example).

You can attach eventListeners to document or any HTML element.

Once custom event has been added and bound to element (or document) one might want to manually fire it from javascript.

document.addEventListener("event-name", function(e) {
  console.log(e.detail); // logs custom object passed from the event.

var event = new CustomEvent("event-name", { "param-name": "param-value" });