事件捕获 & 事件冒泡（Event Capture & Event Bubble）

转载自生动详细解释javascript的冒泡和捕获

事件的发生顺序

这个问题的起源非常简单，假设你在一个元素中又嵌套了另一个元素

-----------------------------------
| element1                        |
|   -------------------------     |
|   |element2               |     |
|   -------------------------     |
|                                 |
-----------------------------------

并且两者都有一个onClick事件处理函数(event handler)。如果用户单击元素2，则元素1和元素2的单击事件都会被触发。 但是哪一个事件先被触发？哪一个事件处理函数会被首先执行？ 换句话说，事件的发生顺序到底如何？

捕获型事件

当你使用捕获型事件时，元素1的事件处理函数首先被触发，元素2的事件处理函数最后被触发

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

冒泡型事件

当你使用冒泡型事件时，元素2的处理函数首先被触发，元素1其次

                 | |  / \
-----------------| |--| |-----------------
| element1       | |  | |                |
|   -------------| |--| |-----------     |
|   |element2    \ /  | |          |     |
|   --------------------------------     |
|        W3C event model                 |
------------------------------------------

addEventListener

作为一个web开发者，你可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数，这是通过addEventListener()方法实现的

如果这个函数的最后一个参数是true，则在捕获阶段绑定函数，反之false，在冒泡阶段绑定函数。

参考或转载

http://www.quirksmode.org/js/events_order.html