有没有办法通过自定义事件传递额外的数据?

IT技术 javascript dom google-chrome-extension dom-events userscripts
2021-03-03 06:42:42

我需要在两个自主用户脚本之间传递数据 - 理想情况下不接触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 环境和一个用户脚本中运行良好,但是当用户脚本触发事件并在其外部或另一个用户脚本内部捕获时,该data属性undefined在 Chromium 中。我想我可以将传递的数据保存在sessionStorage. 还有其他优雅的解决方案吗?完美需要并且可以实现,我能感觉到。

3个回答

是的,您可以使用 aMessageEvent或 a 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);
+1 也可以使用CustomEvent请注意,您应该使用detail属性,只有它event.detail在侦听器中可用
2021-04-18 06:42:42
为了实现这一点使用new CustomEvent('eventName')构造函数,传递一个CustomEventInit哈希数据,由“细节”这样键控:new CustomEvent('eventName', {'detail': data});
2021-04-27 06:42:42
数据是序列化的吗?我可以在其中放置对 HTML 元素的引用吗?
2021-04-30 06:42:42
对我来说detail是在event.originalEvent
2021-04-30 06:42:42
这真是一个令人困惑的答案。它是新的 CustomEvent 还是 document.createEvent ?
2021-05-10 06:42:42

将具有更多详细信息的对象作为属性传递:

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

散列和 Json 对象之间的确切区别是什么?据我所知,我们可以做一个像 var xyz={}; 这样的散列。xyz['index1']="myvalue1"; xyz['index2']="myvalue2";
2021-04-17 06:42:42
需要包装'detail1': "something", detail2: "something else"在命名的属性detail中才能使其工作:var event = new CustomEvent('build', { detail: { 'detail1': "something", detail2: "something else" } });
2021-04-17 06:42:42
这不是 JSON: {foo: "bar"} 这是一个 JavaScript 哈希。JSON 有非常严格的规则(键必须用双引号括起来),即使同一个 JS 是有效的 JSON,在 JS 内部使用它也只是 JS 而不是 JSON。在我看来,如果它是有效的 JSON 并且存储为字符串,则它只是 JSON。当它是 JS 代码时,它只是一个碰巧看起来像 JSON 的 JavaScript 数据结构。
2021-04-22 06:42:42
@SujalMandal - 不同之处在于他根本没有正确使用术语 JSON。那不是 JSON,它只是一个 javascript 对象文字。JSON 是一种字符串格式,用于在程序/存储数据之间传输数据,其语法很大程度上基于 javascript 对象。
2021-04-22 06:42:42

new CustomEventIE 不支持https://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);
此解决方案已被弃用。支持 IE9+ 的一种更具前瞻性的方法是使用 polyfill。另见developer.mozilla.org/en-US/docs/Web/API/CustomEvent/...
2021-05-15 06:42:42