Il costruttore di eventi di Internet Explorer 9, 10 e 11 non funziona

Sto creando un evento, quindi usa il costruttore DOM Event:

new Event('change');

Funziona bene nei browser moderni, tuttavia in Internet Explorer 9, 10 e 11, non funziona con:

Object doesn't support this action

Come posso risolvere Internet Explorer (idealmente tramite un polyfill)? Se non posso, c'è una soluzione alternativa che posso usare?

Esiste un polyfill IE per il costruttore CustomEvent presso MDN . Aggiungendo CustomEvent a IE e usando quello invece funziona.

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

Penso che la migliore soluzione per risolvere il tuo problema e gestire la creazione di eventi cross-browser sia:

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

Questo pacchetto fa la magia:

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

Includi il pacchetto e invia l'evento come segue:

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

Se stai solo cercando di inviare un semplice evento come l'evento di attivazione / disattivazione HTML, questo funziona in Internet Explorer 11 e in altri browser:

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

C'è un servizio polyfill che può riparare questo e altri per te

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

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

il custom-eventpacchetto npm ha funzionato magnificamente per 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);

Personalmente utilizzo una funzione wrapper per gestire eventi creati manualmente. Il codice seguente aggiungerà un metodo statico su tutte le Eventinterfacce (tutte le variabili globali che terminano Eventsono un'interfaccia Event) e ti permetterà di chiamare funzioni come element.dispatchEvent(MouseEvent.create('click'));su 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)));

EDIT: la funzione per trovare tutte le Eventinterfacce può anche essere sostituita da un array per modificare solo le interfacce Event di cui hai bisogno ( ['Event', 'MouseEvent', 'KeyboardEvent', 'UIEvent' /*, etc... */]).