跨瀏覽器兼容的CustomEvent

Question

我需要創建一個自定義事件，它將一些數據傳遞給事件監聽器。 我已經創建了一個如下所示

自定義事件

var event = new CustomEvent('store', { 'detail': obj });
document.getElementById("Widget").dispatchEvent(event);

傾聽者

document.getElementById("Widget").addEventListener('store', function (e) {
  console.log(e.detail);
  document.getElementById("result").innerHTML = e.detail.name+"<br>"+e.detail.address;
}, false);

它在Chrome和Firefox等瀏覽器中運行良好，但在IE11中無效。 我在IE中收到錯誤：

對象不支持此操作

CustomEvent在IE中不起作用。

如何使這種跨瀏覽器兼容？ 我不想使用jQuery trigger()因為Listener可能不在具有jQuery的頁面中

Answer 1

IE11不支持CoustomEvent構造函數。 你可以使用以下pollyfill

(function () {

     if ( typeof window.CustomEvent === "function" ) return false;

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

從MDN復制

Answer 2

看看“我可以使用”頁面以及它對自定義事件的描述。

http://caniuse.com/#feat=customevent

具體來說，請閱讀此引文：

當window.CustomEvent對象存在時，它不能被稱為構造函數。 而不是新的CustomEvent（...），您必須使用e = document.createEvent（'CustomEvent'），然后使用e.initCustomEvent（...）