前言

事件冒泡和事件捕获是由微软和网景公司分别提出的，都是为了解决页面中的事件流（也就是事件的发生顺序）的问题。

<div id="outer">
    <p id="inner">Click me!</p>
</div>

1.事件冒泡

微软提出的事件冒泡，事件冒泡的概念是从内而外，也就是从下到上地去触发事件的节点。
如上述的例如所示，触发p元素的click事件的顺序为：p>div>body>html>document

2.事件捕获

网景公司提出的事件捕获(event capturing)，与事件冒泡相反，事件捕获的事件流是从外层开始发生的，也就是自上乡下。
如上述的例如所示，触发p元素的click事件的顺序为：docunment>html>body>div>p

3.addEventListener的第三个参数

事件监听的方法，通常会有三个参数
element.addEventListener(event,function,useCapture)
event:需要绑定的事件（不用on）
function:参数指定事件触发执行时的函数
useCapture:默认参数为false，指定事件流为冒泡事件，true时指定为事件捕获

4.事件冒泡VS事件捕获

①对于非document节点，先捕获再冒泡
②对于document节点，先执行注册时间，无论是冒泡还是注册

5.事件委托

1.事件委托利用事件冒泡的原理
2.使用情况，需要多个类似的元素绑定事件，一个一个绑定既浪费时间又不利于性能，这时候就可以使用事件委托，让共同的父级元素添加一个事件去处理所有的情况
好处
性能：不需要循环所有的元素的一个个绑定事件
灵活：当有新的子元素时不需要重新绑定事件
注：
scroll,mouseleave,mouseenterfocus,blur,change,submit,reset,select等事件不冒泡。hover事件不能使用事件委托方式。