为什么我的参数没有传递到调度的事件?

Why aren't my parameters getting passed through to a dispatched event?

提问人:CafeHey 提问时间:10/13/2013 最后编辑:Brian Tompsett - 汤莱恩CafeHey 更新时间:12/11/2020 访问量:16204

问:

我设置了一个这样的事件侦听器......

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

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

然后我像这样触发事件:

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

window.dispatchEvent(event);

问题是当我期望注销“blerg”时,解析消息中的控制台 .log 正在注销未定义!

我在这里对事件做错了什么,如何将“cmd”消息传递到事件?

JavaScript 事件 dom-events addeventlistener

评论

0赞 ComFreek 10/13/2013
您应该使用: developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/...CustomEvent

答:

49赞 ComFreek 10/13/2013 #1
  1. 使用 CustomEvent 而不是创建自定义事件。Event

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

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

 

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() 和 CustomEvent::initCustomEvent()):

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

评论

0赞 CafeHey 10/14/2013
这真是太棒了,谢谢,只是想知道,它是否必须在名为“detail”的 json 中,或者这是您添加的东西?
1赞 ComFreek 10/14/2013
@Smickie 您的自定义数据必须位于“detail”键中。否则它不起作用。(顺便说一句,它不被称为“json”。“detail”就是所谓的“key”)。
0赞 LessQuesar 8/4/2016
不错的答案。顺便说一句,对象文字是您寻找的术语typeof ({detail:{cmd:'blerg!'}}).detail ;-)
0赞 Stephen Garside 8/10/2016
可能值得补充的是,您可以使用 Modernizr 来检测是否支持 CustomEvent,然后您可以选择使用哪种方法来创建事件。
1赞 Ilker Cat 6/7/2018
参见 MDN Polyfill 的答案 @olefrank
27赞 olefrank 8/3/2015 #2

对于 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

评论

1赞 Benjamin Intal 6/1/2016
这也在 IE11 中修复了它
1赞 Ilker Cat 6/7/2018
它不仅修复了IE9 / 10,还修复了IE11;)
0赞 anlijudavid 3/7/2020
感谢您的修复
0赞 Jay 7/1/2020
我还必须为 IE11 添加该行,以允许支持类似window.Event = CustomEvent;new Event("myEvent")