Dispatch event with data

I'd like to dispatch an event that will pass some data to any event listeners that listen on that event.

Considering a function that fires an event:

function click() {
  const x = 'foo'
  document.dispatchEvent(new CustomEvent('clicked'))
}

click()

How can I pass custom data to the event listener?

document.addEventListener('clicked', function(e) {
  console.log(x) // logs "foo"
})

Perhaps you are looking for event.detail

new CustomEvent('eventName', {'detail': data})

Instead of data use x and in event listener you can access x using event.detail

function getSelectionBounds() {
  var x = (bounds["x"].toFixed(2));
  var y = "xyz";
  var selectionFired = new CustomEvent("selectionFired", {
    "detail": {"x":x,"y":y }
  });
  
  document.dispatchEvent(selectionFired);
};

document.addEventListener("selectionFired", function (e) {
  alert(e.detail.x+"   "+e.detail.y);
});

Unfortunately CustomEvent not work on IE (before Edge), but you can simply use the normal Event.

Just consider that also Event is an object, and so you can add all custom attributes you need:

 event.X = "foo";

On this way you can check your custom field on the callback function joned to the event.

NB. For old IE version you need this polyfill for new Event missed function:

var event;
if(typeof(Event) === 'function') {
  event = new Event(EVENT_NAME);
}else{
  event = document.createEvent('Event');
  event.initEvent(EVENT_NAME, false, false);
}