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>