Custom event with data

by Rajesh Dixit

HTML

<div id="content" testEvent="notify()"></div>

CSS

#content{
  height:100px;
  width: 100px;
  border:1px solid gray;
}

JavaScript

var custom_event = function(el,ev, data) {
  // Note document.createEvent is deprecated, but this is the only method that is supported in IE and old browsers.

  // Create the event.
  var event = document.createEvent('event');

  // Define that the event name is 'build'.
  event.initEvent(ev, true, true, data);
  
  // Add data to event
  event.detail = data;

  // target can be any Element or other EventTarget.
  el.dispatchEvent(event);
};

var div = document.getElementById("content");
div.addEventListener("testEvent", function(event){
	console.log(event);
});

var data = {"test":"hello World"};
custom_event(div,"testEvent", data);