Internet Explorer 9, 10 & 11 Event constructor doesn't work

I am creating an event, so use the DOM Event constructor:

new Event('change');

This works fine in modern browsers, however in Internet Explorer 9, 10 & 11, it fails with:

Object doesn't support this action

How can I fix Internet Explorer (ideally via a polyfill)? If I can't, is there a workaround I can use?

Solution 1:

There's an IE polyfill for the CustomEvent constructor at MDN. Adding CustomEvent to IE and using that instead works.

(function () {
  if ( typeof window.CustomEvent === "function" ) return false; //If not IE

  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;
})();

Solution 2:

I think that the best solution to solve your problem and deal with cross-browser event creation is:

function createNewEvent(eventName) {
    var event;
    if (typeof(Event) === 'function') {
        event = new Event(eventName);
    } else {
        event = document.createEvent('Event');
        event.initEvent(eventName, true, true);
    }
    return event;
}

Solution 3:

This package does the magic:

https://www.npmjs.com/package/custom-event-polyfill

Include the package and dispatch the event as following:

window.dispatchEvent(new window.CustomEvent('some-event'))