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

Question

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'))

Solution 4

There's a polyfill service which can patch this and others for you

https://polyfill.io/v3/url-builder/

 <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>

Solution 5

the custom-event npm package worked beautifully for me

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

var CustomEvent = require('custom-event');

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

// create and dispatch the event
var event = new CustomEvent('cat', {
  detail: {
    hazcheeseburger: true
  }
});
target.dispatchEvent(event);

View more solutions

Comments

[tfrascaroli]

You sir saved my life. Would it be safe to make a complete substitution? I mean, doing window.Event= CustomEvent on the last line.

[Corey Alix]

In IE11 it seems to be safe to set window.Event = CustomEvent, yes.

[Euan Smith]

For anybody interested it seems to be possible to detect you are in IE (for this case) by checking typeof(Event) which is 'function' for all except IE where it is 'object'. You can then safely polyfill the Event constructor using the approach above.

[Noumenon]

It works! I just think it should return event so I can pass it to dispatchEvent().

[kamituel]

I'm just investigating similar workaround for StorageEvent and typeof(StorageEvent) doesn't work in MS Edge. This works: try { new StorageEvent(); } catch (e) { /* polyfill */ }.

[Sen Jacob]

It might not be safe to substitute window.CustomEvent, if you are using third party libraries which uses IE defined CustomEvent constructor.

[Andrei Bazanov]

In IE you need to place this block of code at the very top before it is needed for instantiation.

[vsync]

initEvent is old and deprecated, you need to at least use the modern way and as a fallback, use the deprecated way.

[vsync]

can't see why you are mixing es6 let (and not use var) with a code supposed to run on old IE.. it might confuse beginners who will copy-paste this

[Patrick Dark]

@vsync shrug I did mention the version number. My personal website was only targeting IE11 last year, so it never occurred to me to check support in older versions. (As of today, I serve IE11 plain HTML without stylesheets or scripts. People need to move on.) In any case, the only version of Internet Explorer still supported by Microsoft as of 2017 April is version 11, so it's a bit of a moot point. I’d not encourage anyone to use an unsupported browser by targeting it. The Web can be a dangerous place.

[vsync]

it's not about that at all, and not about trying to change the world or anything. For example, the title for the question specifically asks for IE 9 and above, and perhaps a person seeking an answer who finds this thread, is developing an app for legacy banking system or some other system for business clients which have no control over their computers and are obliged to work with old IE. this has nothing to do with Microsoft Support..

[reduckted]

@vsync It might be deprecated, but the docs you linked to say "Instead use specific event constructors, like Event()", which is exactly what this is trying to polyfill, so there's no choice really.

[Ramanathan Ganesan]

Refer here developer.mozilla.org/en-US/docs/Web/API/CustomEvent/…

[pttsky]

CustomEvent allows to pass custom data through detail option, and Event doesn't. Am I wrong?

[mikemaccana]

This is a good answer, but there's already another NPM package mentioned as an answer.

[Liran H]

What's wrong with giving users a variety of options?

[Damien Roche]

95 dependencies?

[flu]

@DamienRoche Could it be you missread "Dependents" as "Dependencies"? Because the package actually has 0 dependencies and (by the time of writing) 102 dependents (i.e., packages that depend on it). That 102 dependent packages probably were 95 back in july.

[Damien Roche]

I bloody well did! :P

[Sampgun]

I had to to some adjustments, but this is definitely the solution. Saved my day. Thanks.

[UndyingJellyfish]

CustomEvent is not supported for IE9, 10 or 11 either per my own experience. The only good answer seems to be the accepted.

[sedavidw]

A more generic package is npmjs.com/package/events-polyfill

[thdoan]

I noticed the polyfill on MDN doesn't have this line: CustomEvent.prototype = window.Event.prototype; -- what's the purpose of adding this line?