web前端-事件冒泡

时间冒泡就是说: 当点击子元素的时候, 父元素或者祖先元素如果也绑定了点击事件, 那么父元素或者祖先元素的事件也会触发响应的事件.

事件传播是从父到子
事件响应是从子到父
示例代码如下:

.fatherfather{
    background-color: #80FF00;
    width: 200px;
    height: 200px;
    padding: 40px;
}
.father{
    width: 100px;
    height: 100px;
    background-color: #0094ff;
}

<div class="fatherfather" id="fatherfather">
    <div class="father" id="father">
        <button id="btn">点击我</button>
    </div>
</div>

window.onload = function () {
    var fafa = document.getElementById('fatherfather');
    var fa = document.getElementById('father');
    var b = document.getElementById('btn');

    fa.onclick = function(){
        console.log("I'm father");
    }
    btn.onclick = function(event){
        var event = event || window.event;
        if (event.stopPropagation) { // 普通浏览器取消事件冒泡
            console.log(1);
            event.stopPropagation();// 阻止事件传播
        } else { // IE 取消时间冒泡
            console.log(2);
            event.cancelBubble = true;// 取消冒泡
        }
        console.log("I'm btn");
    }
    fafa.onclick = function  () {
        console.log('fafa');
    }
    document.onclick = function  () {
        console.log('document');
    }
}