This article needs a technical review. How you can help.

The CustomEvent() constructor creates a new CustomEvent.

Note: This feature is available in Web Workers.


 event = new CustomEvent(typeArg, customEventInit);


Is a DOMString representing the name of the event.
Is 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.

The CustomEventInit dictionary also accepts fields from the EventInit dictionary.


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


Specification Status Comment
The definition of 'CustomEvent()' in that specification.
Living Standard Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
BasicSupport 15 11 (11) No support 11.60 Nightly build (535.2)
Available in workers (Yes) 48 (48) (Yes) (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 11.0 (11) ? ? ?
Available in workers (Yes) 48.0 (48) (Yes) (Yes) (Yes)



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: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;

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

See also

Document Tags and Contributors

 Last updated by: DaphneDorman,