一、事件绑定
首先了解：
使用W3C标准的addEventListener和removeEventListener。
这2个函数是W3C标准规定的，FF和Chrome浏览器都支持，IE6/IE7/IE8都不支持这2个函数。不过从IE9开始就支持了这2个标准的API。
addEventListener(type, listener, useCapture);
// type:事件类型,不含"on",比如"click"、"mouseover"、"keydown"; 而不像之前的attachEvent的事件名称,含"on",比如"onclick"、"onmouseover"、"onkeydown";
// listener:事件处理函数
// useCapture是事件冒泡,还是事件捕获,默认false,代表事件冒泡类型
二、事件冒泡和事件捕获
事件冒泡和事件捕获很好理解，只不过是对同一件事情的不同看法，只不过这2种看法都很有道理。我们知道HTML中的元素是可以嵌套的，形成类似于树的层次关系。比如下面的代码：
need-to-insert-img
如果点击了最内侧的outC，那么外侧的outB和outC也被点击了！
1、如果浏览器采用的是事件冒泡，那么触发顺序是C-->B-->A，由内而外，像气泡一样，从水底浮向水面；
2、如果采用的是事件捕获，那么触发顺序是A-->B-->C，从上到下，像石头一样，从水面落入水底。
一般来说事件冒泡机制，用的更多一些，所以在IE8以及之前，IE只支持事件冒泡。IE9+/FF/Chrome这2种模型都支持
通过addEventListener((type, listener, useCapture)的useCapture来设定
useCapture=false代表着事件冒泡，useCapture=true代表着采用事件捕获。
再举个栗子：
need-to-insert-img
使用的是事件冒泡，当点击outC的时候，打印顺序是3-->2-->1。如果将false改成true使用事件捕获，打印顺序是1-->2-->3。
三、DOM事件流
//to do
