JavaScript 冒泡事件 / 事件的传播

冒泡事件

定义

子级标签触发事件，JavaScript中，父级程序默认也会触发相同类型的事件，这样的效果，称为冒泡事件。

规则

只与标签在HTML中的层级关系有关，与css和显示效果无关
执行顺序，都是从当前标签向父级元素，执行
实际的标签的捕获顺序是有区别的：
 	IE浏览器是 从 子级向父级 获取标签，称为   冒泡机制
 	其他浏览器 是 从 父级向子级 获取标签，称为  捕获机制
 	虽然获取标签的方式不一样
 	但是现在所有的执行顺序都是从当前标签向父级标签执行

阻止事件的传播 / 阻止冒泡事件

语法规则

事件对象.stopPropagation()

哪个标题有阻止冒泡事件代码，冒泡事件的执行就到这个标签为止
只触发自己身上的事件，不会触发 父级标签 相同类型的事件
只管自己，谁写，谁不触发，子级父级都不管，就自己触发自己的事件

兼容处理

低版本IE浏览器 会有兼容问题。

兼容语法：

事件对象.cancelBubble = true;   阻止冒泡事件,阻止事件的传播

if(事件对象.stopPropagation){
    事件对象.stopPropagation();
}
else{
    事件对象.cancelBubble = true;
}

实例

css样式：

.box{
    width: 400px;
    height: 400px;
    background: blue;
}

.middle{
    width: 300px;
    height: 300px;
    background: green;
}
.inner{
    width: 200px;
    height: 200px;
    background: orange;
}

html：

<div class="box">
    <div class="middle">
        <div class="inner"></div>
    </div>
</div>

<script>
var oDivBox = document.querySelectorAll('div')[0];
var oDivMiddle = document.querySelectorAll('div')[1];
var oDivInner = document.querySelectorAll('div')[2];


oDivBox.onclick = function(e){
    e = e || window.event;
    console.log('我是box-div触发的事件');
    // 阻止冒泡事件  / 阻止事件的传播
    // 给最外层加载,只是阻止当前标签,触发父级标签的事件
    // 不影响,子级标签,触发父级标签事件
    // 阻止当前div,触发父级标签的事件
    // 但是不影响子级的两个div标签
    // e.stopPropagation();

    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }
};

oDivMiddle.onclick = function(e){
    e = e || window.event;
    console.log('我是middle-div触发的事件');
    // e.stopPropagation();

    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }
};

oDivInner.onclick = function(e){
    e = e || window.event;
    console.log('我是inner-div触发的事件');
    // e.stopPropagation();

    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }

};


document.onclick = function(){
    console.log('我是document');
}
</script>