dispatchEvent in Chrome but not in IE11

Solution 1:

This is the best way to make it work for IE11 and other browsers with considering future changes.

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

$el.dispatchEvent(event);

Solution 2:

I just had the same problem, but the following seems to work in IE11:

var event = document.createEvent("Event");
event.initEvent("submit", false, true); 
// args: string type, boolean bubbles, boolean cancelable
element.dispatchEvent(event);

Solution 3:

It's best to use a polyfil to fix this. (custom-event-polyfill)

# using yarn 
$ yarn add custom-event-polyfill

# using npm 
$ npm install --save custom-event-polyfill

then include/require it in your javascript

import 'custom-event-polyfill';

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

Solution 4:

I assembled bits and pieces of various approaches and got this to work:

var customEvent = document.createEvent('HTMLEvents');
customEvent.initEvent('myCustomEvent', true, true);
document.dispatchEvent(customEvent);

To be honest, this doesn't make a lot of sense to me. It creates an event (naming it HTMLEvents seems to be required) on the document, then goes and initializes that event with another name. If anyone can explain this better please add a comment below so it can be incorporated into the answer.

In any case, I'm able to listen to this custom event in IE11 (and modern browsers) with a standard event listener:

document.addEventListener('myCustomEvent', function(){
  console.log('Event received.');
});