转自：http://www.cnblogs.com/BigIdiot/archive/2013/02/26/2933692.html
w3c事件流:
从根文档(html)开始遍历所有子节点，如果目标事件的父节点设置为捕获时触发，则执行该事件，直到目标被执行，然后再事件冒泡(设置为捕获时触发的事件不再被执行)。
ie事件流:
从目标事件被执行，然后再冒泡父节点的事件，直到根文档。
捕获时触发事件:
<!DOCTYPE html>
<html>
<head>
<title>test event</title>
</head>
<body>
<input id=btn1 type=button value=点击 />
<script>
(
function(){
var show1=function(str){
alert('1');
}
var show2=function(str){
alert('2');
}
var btn1=document.getElementById('btn1');
btn1.addEventListener('click',show1,false);
document.body.addEventListener('click',show2,true); //捕获时触发
}
)()
//执行结果: 2、1
</script>
</body>
</html>
冒泡时触发:
<!DOCTYPE html>
<html>
<head>
<title>test event</title>
</head>
<body>
<input id=btn1 type=button value=点击 />
<script>
(
function(){
var show1=function(str){
alert('1');
}
var show2=function(str){
alert('2');
}
var btn1=document.getElementById('btn1');
btn1.addEventListener('click',show1,false);
document.body.addEventListener('click',show2,false); //冒泡时触发
}
)()
//执行节点: 1、2
</script>
</body>
</html>