Question

我正在创建一个事件，所以请使用DOM Event构造函数：

new Event('change');

这在现代浏览器中运行良好，但在Internet Explorer 9,10＆amp; 11，它失败了：

Object doesn't support this action

如何修复Internet Explorer（理想情况下通过polyfill）？如果我不能，我可以使用吗？

Answer 1

有一个IE polyfill for the CustomEvent constructor at MDN。将CustomEvent添加到IE并使用它可以正常工作。

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

Answer 2

我认为解决问题和处理跨浏览器事件创建的最佳解决方案是：

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

Answer 3

这个包具有魔力：

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

包括该包并按如下方式分派事件：

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

Answer 4

如果您只是尝试调度HTML toggle事件之类的简单事件，则可以在Internet Explorer 11以及其他浏览器中使用：

vendor_detections

Answer 5

custom-event npm包对我来说很漂亮

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

Answer 6

我个人使用包装函数来处理手动创建的事件。以下代码将在所有Event接口上添加静态方法（以Event结尾的所有全局变量都是Event接口），并允许您在IE9 +上调用element.dispatchEvent(MouseEvent.create('click'));之类的函数。

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

编辑：查找所有Event接口的函数也可以替换为数组，以仅更改所需的事件接口（['Event', 'MouseEvent', 'KeyboardEvent', 'UIEvent' /*, etc... */]）。

Answer 7

有一个polyfill服务可以为您修补此修补程序和其他修补程序

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

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

Internet Explorer 9,10＆amp; 11事件构造函数不起作用

7 个答案: