var li = document.querySelector('li');

​

li.addEventListener('click', function(event) {

  debugger;

}, true);

​

// Listen for normal click events on

// the <li> and dispatch custom event

li.addEventListener('click', function(event) {

  var customEvent = new CustomEvent('mySpecialEvent', {

    bubbles: true,

    detail: { data: 'foo' }

  });

  event.currentTarget.dispatchEvent(customEvent);

});

​

// As we have stated that the custom event

// should bubble, we can listen for the 

// it further up the DOM on the document.

document.addEventListener('mySpecialEvent', function(event) {

  alert(event.detail.data);

});