Internet Explorer 9, 10 & 11 Trình xây dựng sự kiện không hoạt động

Tôi đang tạo một sự kiện, vì vậy hãy sử dụng hàm tạo DOM Event:

new Event('change');

Điều này hoạt động tốt trong các trình duyệt hiện đại, tuy nhiên trong Internet Explorer 9, 10 & 11, nó không thành công với:

Object doesn't support this action

Làm cách nào tôi có thể sửa Internet Explorer (lý tưởng thông qua một polyfill)? Nếu tôi không thể, tôi có thể sử dụng cách giải quyết khác không?

Có một polyfill IE cho hàm tạo CustomEvent tại MDN . Thêm CustomEvent vào IE và sử dụng thay thế hoạt động.

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

Tôi nghĩ rằng giải pháp tốt nhất để giải quyết vấn đề của bạn và giải quyết việc tạo sự kiện trên nhiều trình duyệt là:

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

Gói này thực hiện điều kỳ diệu:

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

Bao gồm các gói và gửi sự kiện như sau:

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

Nếu bạn chỉ đang cố gửi một sự kiện đơn giản như sự kiện chuyển đổi HTML, thì sự kiện này hoạt động trong Internet Explorer 11 cũng như các trình duyệt khác:

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ó một dịch vụ polyfill có thể vá lỗi này và các dịch vụ khác cho bạn

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

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

các custom-eventgói NPM làm việc thật đẹp đối với tôi

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

Cá nhân tôi sử dụng chức năng bao bọc để xử lý các sự kiện được tạo thủ công. Đoạn mã sau sẽ thêm một phương thức tĩnh trên tất cả các Eventgiao diện (tất cả các biến toàn cục kết thúc bằng Eventgiao diện Sự kiện) và cho phép bạn gọi các hàm như element.dispatchEvent(MouseEvent.create('click'));trên 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: Hàm tìm tất cả các Eventgiao diện cũng có thể được thay thế bằng một mảng để chỉ thay đổi các giao diện Sự kiện bạn cần ( ['Event', 'MouseEvent', 'KeyboardEvent', 'UIEvent' /*, etc... */]).