JavaScript 冒泡事件 / 事件的传播

逃离我推掉我的手 2023-07-23 03:56 139阅读 0赞

# 冒泡事件 #

### 定义 ###

子级标签触发事件，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>