1.单击事件首先进入捕获阶段开始（逐渐接近元素2的方向）。查看元素2的祖先元素中是否有在捕获阶段有onclick处理函数的
2.发现元素1有一个，于是doSomething2被执行
3.事件检查到目标自己（元素2），捕获阶段没有发现更多的处理函数了。事件开始进入冒泡阶段，想当然执行doSomething()，这个绑定于元素2冒泡阶段的函数。
4.事件向远离元素2的方向，查看是否有任何祖先元素在冒泡阶段绑定了一个处理函数。没有这样的情况，所以什么也没有发生
相反的情况是：
复制代码 代码如下:
element1.addEventListener('click',doSomething2,false)
element2.addEventListener('click',doSomething,false)
现在如果用户点击元素2会发生：
1.单击事件进入捕获阶段。查看元素2的祖先元素中是否有在捕获阶段有onclick处理函数的，结果一无所获
2.事件检查到目标自己。事件开始进入冒泡阶段，并且执行绑定于元素2冒泡阶段的函数。doSomething()
3.事件开始远离目标，检查元素2的祖先元素中是否有在冒泡阶段绑定了处理函数的
4.发现了一个，于是元素1的doSomething2()被执行
六、兼容性和传统模式
在支持w3c dom(文档对象模型) 的浏览器中，传统的事件绑定方法是
复制代码 代码如下:
element1.onclick = doSomething2;
默认被视为在绑定于冒泡阶段
七、使用冒泡型事件
很少的开发人员会有意识的去使用冒泡型事件或者捕获型事件。在他们今天制作的网页中，没有必要让一个事件因为冒泡而被好几个函数处理。但是有时用户通常会很疑惑，因为在他们只点击了一次鼠标之后出现了许多种情况（多个函数被执行，因为冒泡）。而大多数情况下你还是希望你的处理函数相互独立的。当用户点击了某一个元素，发生什么，点击另一个元素，又对应发生些什么，相互独立，而不因为冒泡连锁。
八、一直在发生
首先你要明白的是事件捕获或者冒泡一直在发生。如果你给整个页面文档的定义一个通用onclick处理函数
复制代码 代码如下:
document.onclick = doSomething;
if (document.captureEvents) document.captureEvents(Event.CLICK);
在页面上单击任何元素的单击事件，最终会冒泡至页面最高文档层，因此触发那个通用的处理函数，除非之前一个处理函数明确的指出终止冒泡，这样才冒泡才不会传播到整个文档层面
对上面代码第二句的补充：
>>>先说IE
object.setCapture() 当一个object的被 setCapture 后，他的方法将会被继承到整个文档进行捕获。
当不需要把方法继承到整个文档捕获时，要用 object.releaseCapture()
>>>others
Mozilla 也有类似的功能，方法稍微不同
window.captureEvents(Event.eventType)
window.releaseEvents(Event.eventType)
>>>example
复制代码 代码如下:
//如果只有下面这句话，那只有点击obj是才会触发click obj.onclick = function(){alert("something")}
//若加上下面这句话，则方法会被继承到document（或者window，不同浏览器不同）来捕获
obj.captureEvents(Event.click); //FF
obj.setCapture() //IE
九、用法
因为任何事件传播终止于页面文档（这个最高层），这使默认的事件处理函数变得可能，假设你有这样一个页面
复制代码 代码如下:
------------------------------------
| document |
| --------------- ------------ |
| | element1 | | element2 | |
| --------------- ------------ |
| |
------------------------------------
element1.onclick = doSomething;
element2.onclick = doSomething;
document.onclick = defaultFunction;