SOURCE

var ev = document.getElementById('ev');

// 绑定事件, true表示这个事件在捕获阶段触发.
window.addEventListener('click', function() {
  console.log('window capture')
},true)

document.addEventListener('click',function(){
  console.log('document capture')
},true)

document.documentElement.addEventListener('click', function(){
  console.log('html capture')
}, true)

document.body.addEventListener('click', function(){
  console.log('body capture')
}, true)

ev.addEventListener('click', function(){
  console.log('ev capture')
}, true)

// 自定义事件
var eve = new Event('test');
ev.addEventListener('test', function(){
  console.log('test dispatch')
})
setTimeout(function() {
  ev.dispatchEvent(eve)
}, 1000)

// cusotomEvent
var customEve = new CustomEvent('cat',{
  detail: {
    hazcheeseburger: true
  }
})
ev.addEventListener('cat', function(e) {
  console.log(JSON.stringify(e.detail))
})
ev.dispatchEvent(customEve)

<div id="ev">
  目标元素
</div>

#ev {
  width: 300px;
  height: 300px;
  color: #fff;
  text-align: center;
  line-height: 300px;
  background-color:pink;
}