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中收到错误 - Object doesn't support this action。

CustomEvent is not working in 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

看看＆＃34;我可以使用＆＃34;页面及其对自定义事件的说明。

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

具体来说，请阅读此引文：

当window.CustomEvent对象存在时，它不能被调用为构造函数。您必须使用e =而不是新的CustomEvent（...） document.createEvent（＆＃39; CustomEvent＆＃39;）然后是e.initCustomEvent（...）

Answer 3

使用jQuery有一种最简单的方式，即$.Event

事件监听器

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

生成/触发事件

var data = { 'detail': obj };
$("#Widget").trigger($.Event('store', data));

快乐编码： - ）

跨浏览器兼容的CustomEvent

3 个答案: