事件冒泡

<script type="text/javascript">
    /*
        事件冒泡：点击box2打印出2以后，继续打印出1。
                子元素触发了事件，如果父元素也有同类型事件的话，也会触发。
        冒泡的触发顺序：box2->box1->body->html
        解决方法：event.stopPropagetion();  阻止事件冒泡(IE8及以下没有这个方法)
            IE阻止冒泡
                  event.cancelBubble = true;
     */
    box1.onclick = function(e){
        console.log(1)
    }
    box2.onclick = function(event){
        // 兼容写法
        event = event || window.event;
        event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
        // event.stopPropagation();//冒泡到此为止
        console.log(2);

    }
</script>