DOM事件

在项目开发时，我们时常需要考虑用户在使用产品时产生的各种各样的交互事件，比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。

首先在介绍DOM事件之前我们先来认识下DOM的不同级别。针对不同级别的DOM，我们的DOM事件处理方式也是不一样的。

DOM级别与DOM事件

为什么没有DOM1级事件处理呢？因为1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。

DOM0：
DOM0级事件就是将一个函数赋值给一个事件处理属性，比如：element.onclick = function(){}; 我们可以通过给事件处理属性赋值null来解绑事件。

DOM2：
DOM2级事件定义了addEventListener和removeEventListener两个方法，分别用来绑定和解绑事件，方法中包含3个参数，分别是绑定的事件处理属性名称（不包含on）、处理函数和是否在捕获时执行事件处理函数。例如：element.addEventListener('mouseover',function(){}, false);

需要注意的是IE8及以下版本不支持addEventListener和removeEventListener，需要用attachEvent和detachEvent来实现：

btn.attachEvent('onclick', showFn); // 绑定事件 
btn.detachEvent('onclick', showFn); // 解绑事件

这里我们不需要传入第三个参数，因为IE8及以下版本只支持冒泡型事件。

DOM3:
DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：

• UI事件，当用户与页面上的元素交互时触发，如：load、scroll
• 焦点事件，当元素获得或失去焦点时触发，如：blur、focus
• 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
• 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
• 文本事件，当在文档中输入文本时触发，如：textInput
• 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
• 合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
• 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
  同时DOM3级事件也允许使用者自定义一些事件。

DOM事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。

DOM同时支持两种事件模型：捕获型事件和冒泡型事件，

那么什么是事件冒泡和事件捕获呢？可以用下图来解释：

1.事件冒泡
所谓事件冒泡就是事件像泡泡一样从最开始生成的地方一层一层往上冒，比如上图中a标签为事件目标，点击a标签后同时也会触发p、li上的点击事件，一层一层向上直至最外层的html或document。

2.事件捕获
事件捕获的思想就是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。和事件冒泡相反，事件捕获是自上而下执行，我们只需要将addEventListener的第三个参数改为true就行。

DOM事件流三阶段

在DOM兼容浏览器中，事件流分为3个阶段：

（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；
（2）目标阶段：真正的目标节点正在处理事件的阶段；
（3）冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段。

自定义事件：