Internet Explorer 9, 10 & 11 Der Ereigniskonstruktor funktioniert nicht

Ich erstelle ein Ereignis. Verwenden Sie daher den DOM-Ereigniskonstruktor:

new Event('change');

Dies funktioniert in modernen Browsern einwandfrei, schlägt jedoch in Internet Explorer 9, 10 und 11 fehl mit:

Object doesn't support this action

Wie kann ich den Internet Explorer reparieren (idealerweise über eine Polyfüllung)? Wenn ich nicht kann, gibt es eine Problemumgehung, die ich verwenden kann?

Es gibt eine IE-Polyfüllung für den CustomEvent-Konstruktor bei MDN . Das Hinzufügen von CustomEvent zum IE und dessen Verwendung funktioniert stattdessen.

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

Ich denke, dass die beste Lösung, um Ihr Problem zu lösen und sich mit der Erstellung browserübergreifender Ereignisse zu befassen, Folgendes ist:

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

Dieses Paket macht die Magie:

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

Fügen Sie das Paket hinzu und senden Sie die Veranstaltung wie folgt aus:

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

Wenn Sie nur versuchen, ein einfaches Ereignis wie das HTML-Umschaltereignis auszulösen, funktioniert dies sowohl in Internet Explorer 11 als auch in den anderen Browsern:

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

Es gibt einen Polyfill-Service, der dieses und andere für Sie patchen kann

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

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

Das custom-eventnpm-Paket hat bei mir wunderbar funktioniert

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

Ich persönlich verwende eine Wrapper-Funktion, um manuell erstellte Ereignisse zu verarbeiten. Der folgende Code fügt eine statische Methode für alle EventSchnittstellen hinzu (alle globalen Variablen, die mit enden, Eventsind eine Ereignisschnittstelle) und ermöglicht es Ihnen, Funktionen wie element.dispatchEvent(MouseEvent.create('click'));unter IE9 + aufzurufen .

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

BEARBEITEN: Die Funktion zum Auffinden aller EventSchnittstellen kann auch durch ein Array ersetzt werden, um nur die von Ihnen benötigten Ereignisschnittstellen zu ändern ( ['Event', 'MouseEvent', 'KeyboardEvent', 'UIEvent' /*, etc... */]).