20

我已经设置了一个这样的事件监听器......

window.addEventListener('message', parseMessage, false);

var parseMessage = function(rawMessage) {
    console.log(rawMessage.cmd);
};

然后我触发这样的事件：

var event = new Event('message', {'cmd':"blerg!"});

window.dispatchEvent(event);

问题是当我期望注销“blerg！”时，解析消息中的console.log 正在注销未定义。

我在这里对事件做错了什么，如何将“cmd”消息传递给事件？

4

2 回答 2

49

  1. 使用而不是创建自定义事件。CustomEvent Event

  2. 在“详细信息”对象中指定您的数据（参见代码）。

  3. 我更改了事件名称，因为message它也用于postMessage API。它在 Chrome 中运行时没有引起问题，但我不会使用它。

 

var parseMessage = function(rawMessage) {
  console.log(rawMessage);
  console.log(rawMessage.detail.cmd);
};

// changed event name
window.addEventListener('myMessage', parseMessage, false);

// data should be in a 'details' object
var evt = new CustomEvent('myMessage', {
    detail: {
      'cmd' : "blerg!"
    }
});

window.dispatchEvent(evt);

这是 IE >= 9 兼容性的调整（使用document.createEvent()and CustomEvent::initCustomEvent()）：

var evt = document.createEvent("CustomEvent");
evt.initCustomEvent('myMessage', false, false, {
    'cmd': "blerg!"
});
于 2013-10-13T13:01:40.110 回答
27

对于 IE9/10 polyfill，您可以使用 Mozilla 提供的以下代码：
https ://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

(function () {
  if (
      typeof window.CustomEvent === "function" ||
      // In Safari, typeof CustomEvent == 'object' but it otherwise works fine
      this.CustomEvent.toString().indexOf('CustomEventConstructor')>-1
  ) { return; }

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

此处也有描述，但 URL 错误： https ://stackoverflow.com/a/22946340/1736012

于 2015-08-03T08:53:25.700 回答