为什么我的参数不会传递给调度事件?

时间:2013-10-13 12:45:15

标签: javascript events javascript-events addeventlistener

好的,我已经设置了这样的事件监听器......

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'消息传递给事件?

2 个答案:

答案 0 :(得分:48)

  1. 使用Event的{​​{3}} 代替来创建自定义事件。

  2. 在“详情”对象中指定您的数据(请参阅代码)。

  3. 我更改了活动名称,因为message也用于CustomEvent。在Chrome中运行时没有出现问题,但我不会使用它。

  4. 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兼容性的调整(使用postMessage APIdocument.createEvent()):

    var evt = document.createEvent("CustomEvent");
    evt.initCustomEvent('myMessage', false, false, {
        'cmd': "blerg!"
    });
    

答案 1 :(得分:25)

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

此处也有描述,但网址错误: https://stackoverflow.com/a/22946340/1736012