<div id="box">
<div id="middle">
<div id="inner"></div>
</div>
</div>
<script>
// 事件的传播和阻止
// 事件的传播
// 当点击后代标签时,会触发,所有父级标签,相同类型的事件
// 执行顺序,都是从当前标签向父级元素执行,也就是先执行当前标签的事件,再逐一执行父级标签的是事件
// 捕获顺序,当前标签触发事件,会寻找父级标签上,相同的事件类型,触发一起执行
// 方式1 : 冒泡机制: IE浏览器 从 子级开始,向父级获取具有的相同事件类型
// 方式2 : 捕获机制: 非IE浏览器 从 父级开始,向子级获取具有的相同事件类型
// 但是现在执行时,顺序都是 从 当前标签 至 父级标签
// 阻止事件的传播
// 普通浏览器
// e.stopPropagation();
// 低版本IE浏览器
// e.cancelBubble = true;
// 谁写谁阻止,谁不触发父级
// 谁不写,谁会触发父级
// 大部分事件传播都是需要阻止的
// 只有特殊情况下,才会允许事件的传播
// 使用if判断做兼容处理
/*
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
*/
// 三个div,是嵌套关系 box > middle > inner
// 都添加了相同的事件类型 click
// 点击效果:
// 最外层div : 只触发自己身上绑定的事件
// 中间层div : 触发自己身上绑定的事件,同时触发父级身上,绑定的相同类型的事件
// 只会向外传播,也就是向父级传播,不会向内传播,也就是子级传播
// 最内层div : 触发自己身上绑定的事件,同时触发所有父级身上,绑定的相同类型的事件
var oBox = document.getElementById('box');
var oMiddle = document.getElementById('middle');
var oInner = document.getElementById('inner');
// oBox.addEventListener('click' , function(){
// console.log('我是box,div触发的事件')
// });
// oMiddle.addEventListener('click' , function(){
// console.log('我是middle,div触发的事件')
// });
// oInner.addEventListener('click' , function(){
// console.log('我是inner,div触发的事件')
// });
oBox.onclick = function(e){
e = e || window.event;
// if(e.stopPropagation){
// e.stopPropagation();
// }else{
// e.cancelBubble = true;
// }
console.log('我是box,div触发的事件');
console.log(e);
}
oMiddle.onclick = function(e){
e = e || window.event;
// if(e.stopPropagation){
// e.stopPropagation();
// }else{
// e.cancelBubble = true;
// }
console.log('我是middle,div触发的事件');
console.log(e);
}
oInner.onclick = function(e){
e = e || window.event;
// if(e.stopPropagation){
// e.stopPropagation();
// }else{
// e.cancelBubble = true;
// }
console.log('我是inner,div触发的事件');
console.log(e);
}
// 总结:
// 事件的传播 : 当前标签会触发父级标签相同类型的事件的执行
// 阻止事件的传播:
/*
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
*/
// 事件传播的捕获
// 1,冒泡机制 : IE浏览器执行机制 从当前标签开始,找父级元素中相同类型的事件
// 2,捕获机制 : 非IE浏览器执行机制 从父级标签开始,找后盾元素中相同类型的事件
// 执行顺序
// 都是从当前标签开始 向父级执行