【javascript的冒泡和捕获】
事件的发生顺序
这个问题的起源非常简单，假设你在一个元素中又嵌套了另一个元素
----------------------------------- | 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，则接下来会发生：
（事件在这里就像一个观光客，由外至内游览，逐渐接近被触发的主要元素，然后又反向离开）
- 单击事件首先进入捕获阶段开始（逐渐接近元素2的方向）。查看元素2的祖先元素中是否有在捕获阶段有onclick处理函数的
- 发现元素1有一个，于是doSomething2被执行
- 事件检查到目标自己（元素2），捕获阶段没有发现更多的处理函数了。事件开始进入冒泡阶段，想当然执行doSomething()，这个绑定于元素2冒泡阶段的函数。
- 事件向远离元素2的方向，查看是否有任何祖先元素在冒泡阶段绑定了一个处理函数。没有这样的情况，所以什么也没有发生
相反的情况是：
element1.addEventListener('click',doSomething2,false)
element2.addEventListener('click',doSomething,false)
现在如果用户点击元素2会发生：
- 单击事件进入捕获阶段。查看元素2的祖先元素中是否有在捕获阶段有onclick处理函数的，结果一无所获
- 事件检查到目标自己。事件开始进入冒泡阶段，并且执行绑定于元素2冒泡阶段的函数。doSomething()
- 事件开始远离目标，检查元素2的祖先元素中是否有在冒泡阶段绑定了处理函数的
- 发现了一个，于是元素1的doSomething2()被执行
