The CustomEvent() constructor creates a new CustomEvent.

Note: This feature is available in Web Workers


 event = new CustomEvent(typeArg, customEventInit);



A DOMString representing the name of the event.

customEventInit Optional

A CustomEventInit dictionary, having the following fields:

  • "detail", optional and defaulting to null, of type any, that is an event-dependent value associated with the event.

Note: The CustomEventInit** dictionary also accepts fields from the EventInit dictionary.

Return value

A new CustomEvent object of the specified type, with any other properties configured according to the CustomEventInit dictionary (if one was provided).


// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });

// create and dispatch the event
var event = new CustomEvent("cat", {
  detail: {
    hazcheeseburger: true

Additional examples can be found at Creating and triggering events.


DOM Standard (DOM)
# ref-for-dom-customevent-customevent

Browser compatibility

BCD tables only load in the browser


You can polyfill the CustomEvent() constructor functionality in Internet Explorer 9 and higher with the following code:

(function () {

  if ( typeof window.CustomEvent === "function" ) return false;

  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: null };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;

  window.CustomEvent = CustomEvent;

Internet Explorer >= 9 adds a CustomEvent object to the window, but with correct implementations, this is a function.

See also