一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
DOM是一种文档对象模型，HTLM页面别加载的时候，浏览器会创建一个DOM对象，通过js获取到这个DOM对象，就可以操作页面中的元素
一、DOM事件的级别
（一）DOM0
element.onclick- 默认使用事件冒泡
（二）DOM2
element.addEventListener('click',function(){},false),第三个参数默认为false- 默认使用事件冒泡
（三）DOM3
element.addEventListener('keyup',function(){},false),第三个参数默认为false- 相比于DOM2，新增了很多事件,默认默认使用事件冒泡
二、DOM事件模型
（一）事件流
- 当触发灭个DOM节点的响应事件时，该事件会在当前元素节点与根节点之间按照特定顺序传播，传播过程中经过的节点都会收到该事件，这个传播过程称为DOM事件流
- DOM2规定事件流分为三个阶段：
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
（二）DOM事件捕获具体流程
（三）DOM事件冒泡具体流程
- 事件冒泡是事件捕获的反向过程
三、Event对象的常见应用
event.prentDefault()：阻止默认事件event.stopPropagation()：阻止冒泡，即阻止事件在DOM元素中传播event.stopImmediatePropagation()：阻止DOM元素相同事件的触发。当DOM元素绑定了多个相同类型的事件时，如果被触发，多个事件回按照顺序依次执行。如果绑定的某个事件使用的这个方法，那这个事件的冒泡行为会被阻止，而且该元素绑定的其他相同类型事件都会被阻止，即不执行event.currentTarget:返回绑定事件的元素event.target:返回触发事件的元素
四、自定义事件
（一）使用Event定义
- 实现方法如下：
（二）使用CustomEvent定义
- 实现方法如下：
五、面试题
（一）面试题一
- 选C
- document是一个document node,是一个节点
- 所有的HTML elemets都是element nodes
- 所有的comments(注释)都是document node
（二）面试题二
- 最终打印结果见下图中的控制台部分
- 根据上文的内容，我们可以知道，元素对象mother和daughter绑定的事件在捕获阶段执行，元素对象grandma和bady绑定的事件在冒泡阶段执行
- 然后根据事件流的传播过程，事件传播的过程为：mother->daughter->bady->grandma,这个顺序即为元素绑定事件执行的顺序
