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

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

上面的的两个元素，如果点击 inner，他们的执行顺序是什么呢？

• 事件冒泡：先执行 inner 的监听事件在执行 outer 的监听事件
• 事件捕获：先执行 outer 的监听事件在执行 inner 的监听事件

其实这个很好理解，冒泡就是从一个泡泡从水底往上冒当然是里面的先执行啦。

至于为什么会有这两种情况，这就要谈到网景和微软的战争了，两家公司的理念不同。网景主张捕获方式，微软主张冒泡方式。后来 w3c 将两者都保留了下来。

addEventListener 的第三个参数就是为冒泡和捕获准备的。第三个参数设置为 true 可以将让当前元素绑定的事件先于里面的元素绑定事件执行。默认是 false