跨浏览器兼容的CustomEvent

Question

我需要创建一个自定义事件，并将一些数据传递给事件侦听器。我已经创建了以下类似的事件：

CustomEvent

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()，因为监听器可能不在具有jQuery的页面中

- Sarath S Nair

---

IE11不支持可选参数列表。在您的情况下，“false”请尝试不使用“false”。 - Sandeeproop

@Sandeeproop 我试过了，但在IE11中执行时会停止在var event = new CustomEvent('store', { 'detail': obj });这一行。 - Sarath S Nair

我认为IE11不支持CustomEvent构造函数。请查看此链接：https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Browser_compatibility。你也可以尝试使用polyfill来解决问题，请查看相关内容。 - Sandeeproop

Answer 1

IE11不支持CoustomEvent 构造函数。你可以使用以下polyfill。

(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 复制

- Sandeeproop

Answer 2

请查看“Can I use”页面，了解它对自定义事件的说明。

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

具体来说，阅读以下引用：

虽然存在 window.CustomEvent 对象，但它不能被作为构造函数调用。不要使用 new CustomEvent(...)，而是必须使用 e = document.createEvent('CustomEvent') 然后 e.initCustomEvent(...)。

- dlopez

---

我该如何使用这种方法发送数据{'detail': obj}？ - Sarath S Nair

我非常确定，如果你将数据保存在事件对象本身中，它可以工作。例如，像这样：e.myData = { detail: obj}; - dlopez