Custom Events

custom-event-example.js

// Object that implements the Event Handler Interface
var a = {
  handleEvent: function (e){
    console.log('hola', e.detail);
  }
};

// Custom Event
var custom = new Event('myevent');

// To add custom data, we can use:
var evt = new CustomEvent('myevent', { detail: {
  prop: 'value'
}});

// Example of how to subscribe to custom event
// No matter how many times you add the same event
// it will only add it once
document.body.addEventListener('myevent', a, false);
document.body.addEventListener('myevent', a, false);
document.body.addEventListener('myevent', a, false);

// To dispatch the custom event
document.body.dispatchEvent(evt);

// Remove Event Listener
// You need to send the instance
document.body.removeEventListener('myevent', a);

dispatchEvent.js

function _dispatchEvent(element, eventName, eventData) {
  var ev = document.createEvent("Event");
  ev.data = eventData;
  ev.initEvent(eventName, true, true);
  element.dispatchEvent(ev);
}