事件，就是网页中某一个特别值得关注的瞬间。
事件经常由用户操作或通过其他浏览器功能来触发。
但是也可以使用Javascript在任意时刻触发特定的事件，这个时候的事件和浏览器创建的事件一样。 也就是说这些事件还是有冒泡等属性，而且浏览器也会响应该事件去执行相应的事件处理程序。
我们来跑一个最简单的例子，比如现在页面有一个按钮，长这样：
<button id="myBtn">click me!</button>
我们增加一个点击事件处理程序：
// 事件处理
document.getElementById('myBtn').addEventListener('click', ()=>{
console.log('hi, you trigger the click event')
})
然后我们在页面加载完成之后去模拟一个点击事件。
//模拟一个点击事件
var btn = document.getElementById('myBtn')
// good
// 以前是通过document.createEvent()来创建事件，不过后来被废弃了，现在使用Event()构造函数
var event = new MouseEvent('click') //MouseEvent继承自UIEvent
//触发事件
btn.dispatchEvent(event)
这样在页面加载完成之后【我们没有点击按钮】，但是在console里面看到了，打印信息，但是我们并没有手动触发这个事件，我们模拟事件已经完成了。
MouseEvent的信息可以参考MDN detail ，MouseEvent是继承自UIEvent，你还可以模拟其他类型的事件，除了鼠标事件，还有ClipboardEvent等等等，可以从Event 页面查看。
其中特殊的一个是CustomEvent，允许我们自定义任意功能的事件。
我们以往知道的事件就是点击事件，获取焦点事件，change事件等，我们可以定义特定类型的事件，比如叫做 'any'。首先事件是绑定到某一个dom target上面。
<div id="myDiv">
div with custom event
</div>
然后添加事件监听：
// 先监听
document.getElementById('myDiv').addEventListener('any', (data)=>{
console.log('your custom event trigger the process method', data)
})
触发这个自定义事件：
// 触发any 事件
const data = { name: 'jackkk', } // 创建event对象的初始化数据
const customeEvent = new CustomEvent('any', {
bubbles: true,
detail: data
})
document.getElementById('myDiv').dispatchEvent(customeEvent)
而且我们可以利用事件的冒泡特性，获取到这个data数据，不用在上面的监听程序里面修改代码。相当于，事件触发动作在一处触发，但是我们可以利用冒泡特性，添加多个监听程序。有发布-订阅模式的影子，一个subject的数据变化->dispatchEvent(event),然后通知多个observer，这里的多个observers 可以是 myDiv的任意祖先元素。
所以我们可以写一个另外的监听程序,在这里共享或者说同步获取到数据变化：
document.addEventListener('any', (data)=>{
console.warn('get the data from event dispath', data)
})
参考： MDN
《JS高程》13.5
75team