JS之阻止冒泡事件

    #box1{
        width: 500px;
        height: 400px;
        margin: 0 auto;
        background-color: brown;
    }
    #box2{
        width:400px;
        height: 300px;
        margin: 0 auto;
        background-color: coral;
    }
    #box3{
        width:300px;
        height: 200px;
        margin: 0 auto;
        background-color: pink;
    }




事件流：页面接收事件的顺序

dom事件流：当事件发生时，事件会在该元素节点和根节点之间传播，传播过程中所遇到的节点都会收到该事件

    冒泡：从事件发生的节点到根节点
    捕获：从根节点到事件发生的节点

    注意：IE当中只有冒泡

    阻止事件冒泡

var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
//给123添加事件
box1.addEventListener('click',function(){alert(1)});
box2.onclick = function(){
    alert(2);
};

box3.onclick = function(event){
    //添加事件的兼容性处理
    var e = window.event || event;
    //阻止冒泡事件
    e.stopPropagation();
    alert(3);
}