提问人:CafeHey 提问时间:10/13/2013 最后编辑:Brian Tompsett - 汤莱恩CafeHey 更新时间:12/11/2020 访问量:16204
为什么我的参数没有传递到调度的事件?
Why aren't my parameters getting passed through to a dispatched event?
问:
我设置了一个这样的事件侦听器......
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”消息传递到事件?
答:
49赞
ComFreek
10/13/2013
#1
使用
CustomEvent
而不是创建自定义事件。Event
在“details”对象中指定数据(请参阅代码)。
我更改了事件名称,因为它也用于 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")
评论
CustomEvent