事件冒泡

// 事件冒泡
    // 当触发某个元素的某个事件时，它会先触发自己的对应事件，然后，依次向上触发所有父级的相同事件,如果中间有父级没有相同事件，继续向上触发

    // IE提出的

 var obox1 = document.querySelector(".box1")
    var obox2 = document.querySelector(".box2")
    var obox3 = document.querySelector(".box3")

    obox1.onclick = function(eve){
        var e = eve || window.event;  //e是谷歌中表示的时间，window.event是IE浏览器中表示的事件
        
        if(e.stopPropagation){          //表示在IE中清除了冒泡
            e.stopPropagation();
        }else{                         //表示在谷歌中清除了冒泡
            e.cancelBubble = true;
        }
        alert("red")
    }

    obox2.onclick = function(eve){
        var e = eve || window.event;
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
        alert("blue")
    }
    
    obox3.onclick = function(eve){
        var e = eve || window.event;
        stopBubble(e);  //调用了封装的函数
        alert("green")
    }

    document.onclick = function(){
        alert(1)
    }
    

兼容：（封装成一个函数） 为什么要设置兼容，因为ie和谷歌对事件的表示不同。一个是window.event，一个直接输出函数
    function stopBubble(e){
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    }