javascript事件执行流程分析

我一直想搞清楚事件在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。

总结：子元素绑定事件，父元素是捕获，则先于子元素响应事件，父元素是冒泡，则后于子元素响应事件