前言
单页应用中数据传递的方式有很多，有时候我们并没有用react或者vue，自己封装的简单的单页应用，需要传递一些简单的数据，那么自定义事件的方式是一种。今天haorooms博客简单介绍一下Event及CustomEvent的介绍及使用
event自定义事件
javascript提供了Event对象，所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。Event对象本身就是一个构造函数，可以用来生成新的实例。
new Event(type, options);Event构造函数接受两个参数。第一个参数type是字符串，表示事件的名称；第二个参数options是一个对象，表示事件对象的配置。该对象主要有下面两个属性。
bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。
cancelable：布尔值，可选，默认为false，表示事件是否可以被取消，即能否用Event.preventDefault()取消这个事件。一旦事件被取消，就好像从来没有发生过，不会触发浏览器对该事件的默认行为。
demo
let haoroomsEvent = new Event('haoroomsDemoEvent',{bubbles:true,cancelable:false})
setInterval(() => {
document.dispatchEvent(haoroomsEvent)
}, 3000);
document.addEventListener('haoroomsDemoEvent',(e)=>{
console.log('事件触发了',e)
})我们可以在任何单页应用中，通过
document.dispatchEvent(haoroomsEvent)触发事件
然后通过
document.addEventListener('haoroomsDemoEvent')接受到事件。
事件传递数据
上面的event事件可以传递数据吗？
其实，要传递数据，有另外一个CustomEvent对象，用法和上面event一模一样，只是可以传递一些数据，不过ie浏览器不支持。
demo如下：
let haoroomsEvent = new CustomEvent('haoroomsCustomEvent',{bubbles:true,cancelable:false,detail:{111:22,aa:22,ff:55}})
setInterval(() => {
document.dispatchEvent(haoroomsEvent)
}, 3000);
document.addEventListener('haoroomsCustomEvent',(e)=>{
console.log('事件出发了',e.detail)
})我们通过detail传递了数据。同样，单页应用中的任何位置，都可以通过dispatchEvent 触发事件，然后通过addEventListener拿到事件。
值得一提的是，document 也可以是任何dom对象，都可以的。
小结
上面就是简单的Event及CustomEvent的介绍及使用，欢迎关注haorooms前端博客，转载请注明haorooms前端博客。