是否有任何方法可以通过自定义事件传递额外的数据

Is there any way of passing additional data via custom events?

本文关键字：数据 事件 任何 方法 可以通过 自定义 是否      更新时间：2023-09-26

我需要在两个自主用户脚本之间传递数据——理想情况下不需要接触unsafeWindow对象——我认为使用自定义事件是可行的。我想到了这样的东西（为了这个例子的目的，让我们忽略MSIE模型）：

addEventListener("customEvent", function(e) {
  alert(e.data);
});
var custom = document.createEvent("HTMLEvents");
custom.initEvent("customEvent", true, true);
custom.data = "Some data...";
dispatchEvent(custom);

这在标准Javascript环境中和一个用户脚本中都能很好地工作，但当事件由用户脚本触发并在其外部或另一用户脚本内部捕获时，Chromium中的data属性为undefined。我想我可以将传递的数据保存在sessionStorage中，但这远非无缝的。还有其他优雅的解决方案吗？完美需要并且可以实现，我能感觉到。

是的，您可以使用MessageEvent或CustomEvent。

示例用法：

//Listen for the event
window.addEventListener("MyEventType", function(evt) {
    alert(evt.detail);
}, false);
//Dispatch an event
var evt = new CustomEvent("MyEventType", {detail: "Any Object Here"});
window.dispatchEvent(evt);

将更多详细信息作为属性传递对象：

var event = new CustomEvent('build', { detail: { 'detail1': "something", detail2: "something else" }});
function eventHandler(e) {
  log('detail1: ' + e.detail.detail1);
  log('detail2: ' + e.detail.detail2);
}

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

IE中不支持new CustomEventhttps://caniuse.com/#search=CustomEvent

这里有一个版本，它也适用于IE9+:

//Listen for the event
window.addEventListener("MyEventType", function(evt) {
     alert(evt.detail.test); //alerts "Any Object Here"
}, false);
 //Dispatch an event
 var evt = document.createEvent('CustomEvent');
 evt.initCustomEvent('MyEventType', false, false, { test: "Any Object Here" });
 window.dispatchEvent(evt);
相关文章：