Le constructeur d'événements Internet Explorer 9, 10 et 11 ne fonctionne pas

Je crée un événement, alors utilisez le constructeur d'événement DOM:

new Event('change');

Cela fonctionne bien dans les navigateurs modernes, mais dans Internet Explorer 9, 10 et 11, cela échoue avec:

Object doesn't support this action

Comment puis-je réparer Internet Explorer (idéalement via un polyfill)? Si je ne peux pas, y a-t-il une solution de contournement que je peux utiliser?

Il existe un polyfill IE pour le constructeur CustomEvent chez MDN . L'ajout de CustomEvent à IE et son utilisation fonctionnent à la place.

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

Je pense que la meilleure solution pour résoudre votre problème et gérer la création d'événements multi-navigateurs est:

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

Ce package fait la magie:

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

Incluez le colis et envoyez l'événement comme suit:

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

Si vous essayez simplement de distribuer un événement simple comme l'événement de bascule HTML, cela fonctionne dans Internet Explorer 11 ainsi que dans les autres navigateurs:

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

Il existe un service polyfill qui peut corriger cela et d'autres pour vous

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

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

le custom-eventpackage npm a parfaitement fonctionné pour moi

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

J'utilise personnellement une fonction wrapper pour gérer les événements créés manuellement. Le code suivant ajoutera une méthode statique sur toutes les Eventinterfaces (toutes les variables globales se terminant par Eventsont une interface d'événement) et vous permettra d'appeler des fonctions comme element.dispatchEvent(MouseEvent.create('click'));sur 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 fonction de recherche de toutes les Eventinterfaces peut également être remplacée par un tableau pour modifier uniquement les interfaces d'événement dont vous avez besoin ( ['Event', 'MouseEvent', 'KeyboardEvent', 'UIEvent' /*, etc... */]).