Internet Explorer 9, 10 & 11 Pembuat acara tidak berfungsi

Saya membuat acara, jadi gunakan konstruktor DOM Event:

new Event('change');

Ini berfungsi baik di browser modern, namun di Internet Explorer 9, 10 & 11, gagal dengan:

Object doesn't support this action

Bagaimana saya bisa memperbaiki Internet Explorer (idealnya melalui polyfill)? Jika saya tidak bisa, apakah ada solusi yang dapat saya gunakan?

Ada polyfill IE untuk konstruktor CustomEvent di MDN . Menambahkan CustomEvent ke IE dan menggunakannya malah berfungsi.

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

Saya pikir solusi terbaik untuk menyelesaikan masalah Anda dan menangani pembuatan acara lintas-browser adalah:

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

Paket ini melakukan keajaiban:

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

Sertakan paket dan kirim acara sebagai berikut:

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

Jika Anda hanya mencoba mengirim acara sederhana seperti acara beralih HTML, ini berfungsi di Internet Explorer 11 serta browser lainnya:

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

Ada layanan polyfill yang dapat menambal ini dan lainnya untuk Anda

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

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

yang custom-eventpaket NPM bekerja dengan indah bagi saya

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

Saya pribadi menggunakan fungsi pembungkus untuk menangani acara yang dibuat secara manual. Kode berikut akan menambahkan metode statis pada semua Eventantarmuka (semua variabel global yang diakhiri Eventadalah antarmuka Acara) dan memungkinkan Anda untuk memanggil fungsi seperti element.dispatchEvent(MouseEvent.create('click'));pada 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: Fungsi untuk menemukan semua Eventantarmuka juga dapat diganti dengan array untuk mengubah hanya antarmuka Acara yang Anda butuhkan ( ['Event', 'MouseEvent', 'KeyboardEvent', 'UIEvent' /*, etc... */]).