基本概念：DOM事件的级别

DOM0：element.onclick = function(){}
DOM2：element.addEventListener(‘click’,function(){},false)
DOM3：element.addEventListener(‘keyup’,function(){},false)
注：DOM1中没有关于DOM事件的相关内容
DOM3中新增了DOM事件和自定义事件

DOM事件模型

捕获（从上到下）
冒泡（从下到上）
详解见DOM事件流以及具体流程

DOM事件流

DOM事件流是指浏览器与用户交互过程中发生的三个阶段，通过捕获到达目标事件，再通过冒泡回传

描述DOM事件捕获的具体流程

捕获阶段（从上到下）：
window→document→html（documentElement是html的外层节点）→body→…→目标元素
目标阶段事件在目标节点上发生
冒泡阶段（从下到上）
目标元素→…→body→html→document→window
代码如下：

结果：

Event对象的常见应用

event对象是指用来获取事件的相关信息，比如点击事件弹出弹框等
event.preventDefault() 取消事件的默认作用
event.stopPropagation() 取消事件冒泡
event.stopImmediatePropagation() 阻止事件冒泡和元素上其他相同事件
event.currentTarget 事件绑定的元素
event.target 引起事件触发的元素
注意：event.currentTarget与event.target的区别
参考如下理解：https://blog.****.net/jiang7701037/article/details/81481263

自定义事件

两种用法，如代码中所示：
1、Event，不带参数

2、CustomEvent，带参数