一、事件的发生顺序
这个问题的起源非常简单，假设你在一个元素中又嵌套了另一个元素
复制代码 代码如下:
-----------------------------------
| element1 |
| ------------------------- |
| |element2 | |
| ------------------------- |
| |
-----------------------------------
：并且两者都有一个onClick事件处理函数(event handler)。如果用户单击元素2，则元素1和元素2的单击事件都会被触发。但是哪一个事件先被触发？哪一个事件处理函数会被首先执行？换句话说，事件的发生顺序到底如何？
二、两种模型
不出所料，在那些“不堪回首”（浏览器大战）的日子里，Netscape和微软有两种截然不同的处理方法：
Netscape主张元素1的事件首先发生，这种事件发生顺序被称为捕获型
微软则保持元素2具有优先权，这种事件顺序被称为冒泡型
这两种事件顺序是截然相反的。Explorer浏览器只支持冒泡事件，Mozilla，Opera7和Konqueror两者都支持。而更古老的opera和iCab两者都不支持
三、捕获型事件
当你使用捕获型事件时
复制代码 代码如下:
| |
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 \ / | |
| ------------------------- |
| Event CAPTURING |
-----------------------------------
：元素1的事件处理函数首先被触发，元素2的事件处理函数最后被触发
四、冒泡型事件
当你使用冒泡型事件时
复制代码 代码如下:
/ \
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 | | | |
| ------------------------- |
| Event BUBBLING |
-----------------------------------
：元素2 的处理函数首先被触发，元素1其次
五、W3C 模型
W3c明智的在这场争斗中选择了一个择中的方案。任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段
复制代码 代码如下:
| | / \
-----------------| |--| |-----------------
| element1 | | | | |
| -------------| |--| |----------- |
| |element2 \ / | | | |
| -------------------------------- |
| W3C event model |
------------------------------------------
为一个web开发者，你可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数，这是通过addEventListener()方法实现的，如果这个函数的最后一个参数是true，则在捕获阶段绑定函数，反之false，在冒泡阶段绑定函数。
假设你要做
复制代码 代码如下:
element1.addEventListener('click',doSomething2,true)
element2.addEventListener('click',doSomething,false)
如果用户单击元素2，则接下来会发生：
（事件在这里就像一个观光客，由外至内游览，逐渐接近被触发的主要元素，然后又反向离开）