跨浏览器兼容的 CustomEvent答案

【问题标题】：Cross Browser compatible CustomEvent跨浏览器兼容的 CustomEvent
【发布时间】：2016-09-30 15:33:10
【问题描述】：

我需要创建一个自定义事件，它将一些数据传递给事件监听器。我已经创建了一个像下面这样的

自定义事件

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 的页面中

【问题讨论】：

IE11 不支持可选参数列表器。在你的情况下'假'尝试不假
@Sandeeproop 我试过了，但执行停止在 var event = new CustomEvent('store', { 'detail': obj });在 IE11 中
我认为 IE11 不支持 CustomEvent 构造函数。检查此链接developer.mozilla.org/en-US/docs/Web/API/CustomEvent/…。 pollyfill 也可以检查一下

标签： javascript jquery events cross-browser jquery-events

【解决方案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

【讨论】：

【解决方案2】：

查看“我可以使用”页面以及它对自定义事件的说明。

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

具体来说，请阅读以下引文：

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

【讨论】：

如何使用这种方法发送数据 { 'detail': obj } ？
我很确定如果您将数据保存在事件对象中，它本身就可以工作。例如，像这样的事情。 e.myData = { detail: obj};