El constructor de eventos de Internet Explorer 9, 10 y 11 no funciona

Estoy creando un evento, así que use el constructor de eventos DOM:

new Event('change');

Esto funciona bien en los navegadores modernos, sin embargo, en Internet Explorer 9, 10 y 11, falla con:

Object doesn't support this action

¿Cómo puedo arreglar Internet Explorer (idealmente a través de un polyfill)? Si no puedo, ¿hay alguna solución que pueda usar?

Hay un polyfill de IE para el constructor CustomEvent en MDN . Agregar CustomEvent a IE y usarlo en su lugar funciona.

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

Creo que la mejor solución para resolver su problema y tratar con la creación de eventos entre navegadores es:

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

Este paquete hace la magia:

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

Incluya el paquete y envíe el evento de la siguiente manera:

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

Si solo está tratando de enviar un evento simple como el evento de alternancia HTML, esto funciona en Internet Explorer 11 y en los otros navegadores:

let toggle_event = null;
try {
    toggle_event = new Event("toggle");
}
catch (error) {
    toggle_event = document.createEvent("Event");
    let doesnt_bubble = false;
    let isnt_cancelable = false;
    toggle_event.initEvent("toggle", doesnt_bubble, isnt_cancelable);
}
// disclosure_control is a details element.
disclosure_control.dispatchEvent(toggle_event);

Hay un servicio de polyfill que puede parchear este y otros para usted

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

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

el custom-eventpaquete npm funcionó muy bien para mí

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

Personalmente uso una función de contenedor para manejar eventos creados manualmente. El siguiente código agregará un método estático en todas las Eventinterfaces (todas las variables globales que terminan en Eventuna interfaz de Evento) y le permitirá llamar a funciones como element.dispatchEvent(MouseEvent.create('click'));en IE9 +.

(function eventCreatorWrapper(eventClassNames){
    eventClassNames.forEach(function(eventClassName){
        window[eventClassName].createEvent = function(type,bubbles,cancelable){
            var evt
            try{
                evt = new window[eventClassName](type,{
                    bubbles: bubbles,
                    cancelable: cancelable
                });
            } catch (e){
                evt = document.createEvent(eventClassName);
                evt.initEvent(type,bubbles,cancelable);
            } finally {
                return evt;
            }
        }
    });
}(function(root){
    return Object.getOwnPropertyNames(root).filter(function(propertyName){
        return /Event$/.test(propertyName)
    });
}(window)));

EDITAR: La función para buscar todas las Eventinterfaces también se puede reemplazar por una matriz para alterar solo las interfaces de eventos que necesita ( ['Event', 'MouseEvent', 'KeyboardEvent', 'UIEvent' /*, etc... */]).