我一直想搞清楚事件在DOM中的传播方式，今天经高人指点终于明白一二。首先扒了一张图：
事件捕获过程：当我们点击TEXT时，首先是window->document->body->div->text.这个过程称为事件捕获，W3C浏览器的标准执行流程。
事件冒泡过程：text->div->body->document->window.这个过程称为事件冒泡。IE浏览器只支持冒泡，不支持捕获。W3C浏览器先执行捕获，后执行冒泡。
再来看看addEventLister()函数，第3个参数默认为false,表示事件以冒泡的方法传播，当为true时，表示以捕获的方法。
<div class="selector2">selector2<div class="selector1">selector1</div></div>
<script type="text/javascript">
window.onload=function(){
var selector2 = document.querySelector(".selector2"),
selector1 = document.querySelector(".selector1"); //第三个参数默认为false，以冒泡的方式
selector1.addEventListener("click",function(){
console.log("selector1");
})
selector2.addEventListener("click",function(){
console.log("selector2");
})
document.body.addEventListener("click",function(){
console.log("body click");
})
//点击selector1 输出selector1,selector2,body click
//点击selector2 输出selector2,body click
</script>
其中selector1,selector2都是以冒泡的方法传播事件，先执行自己的click,再执行parentNode的click.
//第三个参数默认为true，以捕获的方式
selector1.addEventListener("click",function(){
console.log("selector1");
})
selector2.addEventListener("click",function(){
console.log("selector2");
},true) document.body.addEventListener("click",function(){
console.log("body click");
},true)
//点击selector1 输出body click,selector2,selector1
//点击selector2 输出body click,selector2
其中selector2和body以捕获方式执行，当点击selector1时，最先是body捕获，然后是selector2捕获，最后才传递到selector1。
如果把selector1也以捕获方式，结果还是一样的，以为selector1中没有元素捕获不到子元素的事件。
//第三个参数默认为false，以冒泡的方式,想让谁不冒泡的话在他的事件里面加上stopPropagation
selector1.addEventListener("click",function(e){
var e=window.event || e;
e.stopPropagation();
e.cancelBubble=true; //IE冒泡
console.log("selector1");
})
selector2.addEventListener("click",function(e){
console.log("selector2");
})
//点击selector1输出selector1
//点击selector2输出selecttor2
阻止了事件传播selector1不能向上冒泡了，如果把selector2的方式改为捕获，则点击selector1时输出selector2,selector1。selector2能捕获到它内部的selector1的事件。
selector1.addEventListener("click",function(){
console.log("selector1");
})
selector2.addEventListener("click",function(e){
var e=window.event || e;
e.stopPropagation();
console.log("selector2");
},true)
//点击selector1和selector2都输出selector2
见证奇迹时刻到了，点击selector1和selector2都输出selector2。
当我点击selector1时
事件流程： body->selector2-XX->selector1->selector2->body。因为selector2的捕获断了，不能传递到selector1。
总结：子元素绑定事件，父元素是捕获，则先于子元素响应事件，父元素是冒泡，则后于子元素响应事件