事件，就是网页中某一个特别值得关注的瞬间。
事件经常由用户操作或通过其他浏览器功能来触发。
但是也可以使用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