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

Question

I need to pass data between two autonomic user scripts - ideally without touching the unsafeWindow object - and I thought using custom events would be the way to go. I thought of something like this (let us disregard the MSIE model for the purpose of the example):

addEventListener("customEvent", function(e) {
  alert(e.data);
});

var custom = document.createEvent("HTMLEvents");
custom.initEvent("customEvent", true, true);
custom.data = "Some data...";
dispatchEvent(custom);

This works nicely in the standard Javascript environment and within one user script, but when the event is fired by the user script and caught outside of it or inside another user script, the data property is undefined in Chromium. I suppose I could just save the passed data in the sessionStorage, but it is far from seamless. Any other elegant solutions? Perfection need and can be achieved, I can feel it.

Solution 1

Yes, you can use a MessageEvent or a CustomEvent.

Example usage:

//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);

Solution 2

pass object with more details as attributes:

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

Solution 3

new CustomEvent is not supported in IE https://caniuse.com/#search=CustomEvent

Here is a version which also works on 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);

Comments

[Capi Etheriel]

To achieve this using the new CustomEvent('eventName') constructor, pass the data in a CustomEventInit hash, keyed by 'detail' like this: new CustomEvent('eventName', {'detail': data});.

[joonas.fi]

This is not JSON: {foo: "bar"} It's a JavaScript hash. JSON has very strict rules (keys must be enclosed in double quotes), and even when the same JS would be valid JSON, using it inside JS is just JS and not JSON. In my opinion it's only JSON if it's valid JSON and it is stored as a string. When it's JS code it's just a JavaScript datastructure that happens to look like JSON.

[Vlas Bashynskyi]

I s that data serialized? Can I put a reference to an HTML element in there?

[Sujal Mandal]

What are the exact differences between hashes and Json objects? As far as I know we can make a hash like var xyz={}; xyz['index1']="myvalue1"; xyz['index2']="myvalue2";

[Jimbo Jonny]

@SujalMandal - the difference is that he's not using the term JSON correctly at all. That's not JSON, that's just a javascript object literal. JSON is a string format which is is used to transfer data between programs/store data and its syntax is heavily based on javascript objects.

[ivkremer]

+1 for using CustomEvent as well. Note that you should use detail property, only this will be available under event.detail in the listener.

[Phil]

This is a really confusing answer. Is it new CustomEvent or document.createEvent ?

[Jay]

Need to wrap 'detail1': "something", detail2: "something else" in a property named detail in order for it to work: var event = new CustomEvent('build', { detail: { 'detail1': "something", detail2: "something else" } });

[Kaushal]

For me detail is in event.originalEvent.

[JKL]

This solution has been deprecated. A more futureproof way to support IE9+ is to use a polyfill. See also developer.mozilla.org/en-US/docs/Web/API/CustomEvent/…