事件流
在理解这两个概念之前可以先来理解一个概念叫：事件流，指的是触发事件的先后顺序。可以把事件冒泡和事件捕获想成对于事件流的一种实现方式。
很久之前IE和网景公司对于事件实现的时候产生一个方面的共识，那就是当我们点击一个网页的时候，点击页面内任何一个元素，那么点击的不只是那一个元素，而是整个页面。相当于一个同心圆，我们手指指向中心的时候，其实指向的不只是中心圆，而是所有的圆。如下图。但是在关于如何实现事件流的时候，两个公司却给出了截然相反的理念。
事件冒泡
这个由微软提出并使用在IE浏览器中，事件冒泡的基本理念是从特定目标到不特定目标的顺序进行触发。那么触发的顺序就如同下图：
如有下例一个页面：
1 <html>
2
3 <body>
4
5 <input type=“submit” />
6
7 </body>
8
9 </html>
当我们点击页面内的input元素的时候，如果只看这个结构里面的内容，那么触发的顺序为：input >> body >> html
事件捕获
这个由网景公司提出，事件捕获的基本理念是从不特定目标到特定目标的顺序进行触发。那么触发的顺序如下图：
如有下例一个页面：
1 <html>
2
3 <body>
4
5 <input type=“submit” />
6
7 </body>
8
9 </html>
当我们点击页面内的input元素的时候，如果只看这个结构里面的内容，那么触发的顺序为：html >> body >> input
DOM2级事件
W3C在很久之前就着手规划事件，把事件分为两个部分，第一个部分为事件捕获阶段，第二个部分为事件冒泡阶段。相当于每个事件经历了两个步骤，一个为事件捕获，一个为事件冒泡，就如下图一样：
关于兼容问题，从IE9开始的浏览器以及现在的Safari、firefox、chrome、opera浏览器都支持DOM2级事件，但是如果要兼容IE9以下的浏览器，那就需要使用时间冒泡类型来兼容IE9以后的浏览器了。