cachaito
1/4/2015 - 12:18 AM

Custom events

//basic event creating:
var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

// dispatch the event.
elem.dispatchEvent(event);


//create own event with passed data:
var myEvent = new CustomEvent("userLogin", {
  //Any data passed when initializing the event.
  detail: {
    username: "davidwalsh"
  },
  bubbles: true,
  cancelable: true
});

//trigger own event:
myElement.dispatchEvent(myEvent);

//listen to custom event is a standard:
myElement.addEventListener("userLogin", function(e) {
  console.info("Event is: ", e);
  console.info("Custom data is: ", e.detail);
}, false);

//use example:
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);
});