js的事件冒泡、捕获、目标和事件的兼容

在js中，事件的写法有三种，这也是件事的兼容。
1.addEventListener

        var div=document.querySelector("div");
        div.addEventListener("click",clickHandler1);
        function clickHandler1(e){
            //e.stopPropogation();
            console.log(e)
        }
        div.addEventListener("click",clickHandler2);
        function clickHandler2(e){
            console.log("bbb")
        //this.removeEventListener("click",clickHandler)   删除事件
        }

缺点:不支持IE8及以下
优点：支持捕获和冒泡阶段分开侦听
支持事件抛发机制
支持同一个对象且同一个事件做多个事件回调函数，如例中的clickHandler1，clickHandler2都可以执行
事件使用时可以将函数与内容完全分离
1.attachEvent

div.attachEvent("onclick",clickHandler);
 function clickHandler(e){
        console.log(e);
     //div.detachEvent("onclick",clickHandler);   删除事件
  } 

缺点：IE8以上不支持，没有捕获，不支持一次点击({noce:true}) addEventListener的第四个参数，相当于删除事件，前面的文章中说过。
优点：支持IE8以下，
并且可以同一个对象且同一个事件调用多个回调函数
事件使用时可以将函数与内容完全分离
3.onclick

        div.onclick=function(){
            console.log("a");
        }
        div.onclick=function(){
            console.log("b");
        }   //只能打印  b  

优点:全浏览器支持，不考虑兼容问题，
代码便捷
缺点：不支持事件抛发机制，只能使用系统默认事件
同一个元素同一个事件不支持多个回调函数
因为代码大量使用匿名函数，容易造成回调地狱，并且在开发中代码实际功能不能分离
上面内容说到了兼容，下面是兼容问题的写法

            function addEventListen(elem,type,callback){   //elem是侦听对象，type是事件类型，callback是回调函数 ，删除事件也是这样兼容
            try{                                            //可以不写在函数内，直接 try  catch ，我只是习惯了写在函数内
                elem.addEventListener(type,callback)
            }catch(e){
                elem.attachEvent("on"+type,callback);
            }
        }

事件的兼容问题和事件说了后，就可以说冒泡、捕获和目标了

假设现在有对象A,对象B，对象C，包含顺序是A-->B-->C ,C在最里层，三个对象都设置了侦听，点击C时，执行顺序:
A-->B-->C进入到里层，这是捕获阶段，然后开始执行事件 C-->B-->A 这就是冒泡阶段，找到C就是目标阶段。
在只有一个对象时候，冒泡机制没什么影响，所以不用考虑，但是当对象包含对象时候，就必须要考虑到冒泡。
下面，代码示例

var div0=document.querySelector(".div0");
var div1=document.querySelector(".div1");
var div2=document.querySelector(".div2");
div0.addEventListener("click",div0ClickHandler);
div1.addEventListener("click",div1ClickHandler);
div2.addEventListener("click",div2ClickHandler,true);
function div0ClickHandler(e){
         //console.log(e);           
         console.log(e.currentTarget);//老版本浏览器
  }
function div1ClickHandler(e){
    console.log(e.currentTarget);       
    // e.stopPropagation();  //停止冒泡   新版本浏览器用
}
function div2ClickHandler(e){
    console.log(e.currentTarget);   
   }

可以看到，当点击最里面的div2时，打印的时顺序是div2-->div1-->div0 这就是冒泡
当div1加了阻止冒泡后，当点击最里面的div2时，打印的就是 div2-->div1，因为冒泡阻止在div1了
第三个参数如果是true,就是捕获，当点击后，在进去的时候就执行事件，比如div2加了true,不影响，还是div2-->div1-->div0
比如div0加了true,就是div0-->div2-->div1,在进去的时候执行了最外层。

html

<div class="div0">
         div0
<div class="div1"> div1
 <div class="div2"> div2</div>
</div>
</div>

css

  .div0
        {
            200px;
            height: 200px;
            background-color: aquamarine;
            position: relative;
            left:0;
            right: 0;
            margin: auto;
            border:1px solid #000000;
        }
        .div1
        {
             130px;
            height: 130px;
            background-color: orange;
            position: absolute;
            left:0;
            right: 0;
            top:0;
            bottom: 0;
            margin: auto;
        }
        .div2
        {
             50px;
            height: 50px;
            background-color: skyblue;
            position: absolute;
            left:0;
            right: 0;
            top:0;
            bottom: 0;
            margin: auto;
        }