HTML依托于JavaScript来实现用户与WEB网页之间的动态交互，接收用户操作并做出相应的反馈，而事件在此间则充当桥梁的重要角色。

日常开发中，经常会为某个元素绑定一个事件，编写相应的业务逻辑，在元素被点击时执行，并反馈到用户操作界面。

这个过程中，事件就像一个侦听器，当点击动作发生时，才会执行对应的程序。这种模式可称之为观察员模式。

接下来就讲讲DOM事件相关知识。

何为事件

事件就是用户或浏览器自身执行的某种动作

常用的DOM事件有click/mouseover/mouseout/keyup/keydown等。

事件流

事件流描述的是从页面中接收事件的顺序

HTML描述的是一个DOM文档结构，而事件流所描述的是DOM文档节点接收事件顺序。

而事件流有两种事件模式，捕获/冒泡，两者所描述的事件传递顺序对立相反。

事件模式：捕获与冒泡

冒泡

事件冒泡：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）

规范要求事件冒泡到document对象，而浏览器则会将事件一直冒泡到window对象。

所有浏览器都支持事件冒泡（包括IE9以下）。

捕获

事件捕获：（与事件冒泡相反）事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件

与冒泡一样，虽然规定事件应该从document对象开始传播，但浏览器普遍都是从window对象开始捕获。

IE9以下不支持事件捕获

DOM 事件流

"DOM2级事件"规定事件流包括三个阶段，顺序进行

1. 事件捕获阶段

2. 处于目标阶段

3. 事件冒泡阶段

TIPS: 实际的目标元素在捕获阶段不会接收到事件，在处于目标阶段时接收事件发生处理，并被看成是冒泡阶段的一部分。

尽管"DOM2级事件"规范明确要求捕获阶段不会涉及事件目标，但浏览器会在捕获阶段触发事件对象上的事件。

 事件处理程序

响应某个事件的函数方法，我们称之为事件处理程序（或事件侦听器）

window.onclick = function() {     //... } // 这里的function(){}就是事件处理程序

HTML事件处理程序

HTML中元素支持的事件，可以使用一个同名的HTML特性来指定，而这个特性的值就是js能执行的代码或表达式。写法上可以看出类似HTML中id/type/class等属性的写法，都是on+'...'

缺点：HTML是结构层（显示层），而JavaScript是行为层（业务层）。在显示层上去编写业务逻辑代码处理，会使得HTML与JavaScript代码耦合过于紧密，不好维护。

DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。

而DOM事件分为3个级别：DOM 0级事件处理程序，DOM 2级事件处理程序和DOM 3级事件处理程序。DOM 1级中没有规范事件的相关内容，所以没有DOM 1级事件处理。

DOM0 级事件处理程序

每个元素(HTML元素)都有自己的事件处理程序属性，属性名通常以on开头，例如onclick/onmouseover。为这个属性的值设置一个函数，就可以指定事件处理程序。而将其属性值赋值为null，则完成解绑。(同个元素无法绑定多个同名事件)

var myBtn = document.getElementById('myBtn');  // 为myBtn绑定事件处理程序, 只能绑定一个 myBtn.onclick = function() {     alert('Hello world!'); }  // 解绑 myBtn.onclick = null;

DOM2 级事件处理程序

"DOM2级事件"定义了两个方法，addEventListener()/removeEventListener()，用于为元素绑定和解绑事件。

（可绑定多个事件，区别于DOM0级/HTML仅能绑定一个）。

el.addEventListener(eventName, callBack, useCapture)

• eventName: 事件名称

• 关键字：