JS中自定义事件的使用与触发操作实例分析

var myEvent = new Event('event_name');

var myEvent = new CustomEvent('event_name', {
 detail:{
  // 将需要传递的数据写在detail中，以便在EventListener中获取
  // 数据将会在event.detail中得到
 },
});

//假设listener注册在window对象上
window.addEventListener('event_name', function(event){
 // 如果是CustomEvent，传入的数据在event.detail中
 console.log('得到数据为', event.detail);

 // ...后续相关操作
});

// 需要提前定义好事件，并且注册相关的EventListener
var myEvent = new CustomEvent('event_name', { 
 detail: { title: 'This is title!'},
});
window.addEventListener('event_name', function(event){
 console.log('得到标题为', event.detail.title);
});
// 随后在对应的元素上触发该事件
if(window.dispatchEvent) { 
 window.dispatchEvent(myEvent);
} else {
 window.fireEvent(myEvent);
}
// 根据listener中的callback函数定义，应当会在console中输出 "得到标题为 This is title!"