js中的事件冒泡

js中如果元素是父子关系，事件会产生冒泡现象，而且执行顺序是 从 子到爷
如：

   <div id='div1'>1
        <div id='div2'>2
            <div id="div3">3</div>
        </div>
    </div>

        var obj1= document.getElementById("div1");
        var obj2 = document.getElementById("div2");
        var obj3 = document.getElementById("div3");
        obj1.addEventListener('click',function(e){ divClick('div1');});
        obj2.addEventListener('click',function(e){ divClick('div2');});
        obj3.addEventListener('click',function(e){ divClick("div3");});

        function divClick(log){
            console.log(log)
        }

点击 3 执行效果是：

image.png

阻止事件冒泡的方法：
event.stopPropagation()
IE 是 ：
event.cancelBubble=true;

        var obj1= document.getElementById("div1");
        var obj2 = document.getElementById("div2");
        var obj3 = document.getElementById("div3");
        obj1.addEventListener('click',function(e){ divClick('div1');stopPropagation(e)});
        obj2.addEventListener('click',function(e){ divClick('div2');stopPropagation(e)});
        obj3.addEventListener('click',function(e){ divClick("div3");stopPropagation(e)})

        function divClick(log){
            console.log(log)
        }
        function stopPropagation(event){
            var e= window.event||event;
            if(e.stopPropagation){
                e.stopPropagation();
            }else{
                e.cancelBubble=true;
            }
        }

点击3 结果就是 ：

image.png