[js] 事件的传播---冒泡事件

冒泡事件解释

事件的传播

• 当前标签触发事件
• 父级所有的标签 都会触发 类型相同的事件
  标签的关系是 嵌套关系
  事件类型必须相同

事件传播的方式

• 想当初 浏览器事件传播的方式 是 不同的

• 方式1: 当前标签 — 父级标签
  冒泡方式传播
• 方法2: 父级标签 — 当前标签
  捕获方式传播
  事件监听语法 设定第三个参数 为 true
  标签对象.addEventListener( 数据类型 , 数据处理函数 , true )

• 现在浏览器 事件传播的方式 都是 冒泡方式

例子1：

<div class="div1">
     <div class="div2">
         <div class="div3">
             <div class="div4"></div>
         </div>
     </div>
</div>

*{
            margin: 0 ;
            padding: 0 ;
        }

        

        .div1{
            width: 300px;
            height: 300px;
            background: pink;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }

        .div2{
            width: 200px;
            height: 200px;
            background: blue;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .div3{
            width: 100px;
            height: 100px;
            background: green;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .div4{
            width: 50px;
            height: 50px;
            background: yellow;
            display: flex;
            justify-content: center;
            align-items: center;
        }

// 添加点击事件
        var oDiv1 = document.querySelector('.div1');
        var oDiv2 = document.querySelector('.div2');
        var oDiv3 = document.querySelector('.div3');
        var oDiv4 = document.querySelector('.div4');

        oDiv1.addEventListener('click' , function(){ console.log(111) });
        oDiv2.addEventListener('click' , function(){ console.log(222) } );
        oDiv3.addEventListener('click' , function(){ console.log(333) });
        oDiv4.addEventListener('click' , function(){ console.log(444) });

例子2：

只给最外层的父亲添加点击事件，当点击子元素时候，也会冒泡到父亲

var oDiv1 = document.querySelector('.div1');
        var oDiv2 = document.querySelector('.div2');
        var oDiv3 = document.querySelector('.div3');
        var oDiv4 = document.querySelector('.div4');

        oDiv1.addEventListener('click' , function(){ console.log(111) });

捕获模式

捕获方式传播
事件监听语法 设定第三个参数 为 true
标签对象.addEventListener( 数据类型 , 数据处理函数 , true )

// 添加点击事件
        var oDiv1 = document.querySelector('.div1');
        var oDiv2 = document.querySelector('.div2');
        var oDiv3 = document.querySelector('.div3');
        var oDiv4 = document.querySelector('.div4');

        oDiv1.addEventListener('click' , function(){ console.log(111)},true);

        oDiv2.addEventListener('click' , function(){ console.log(222)},true);

        oDiv3.addEventListener('click' , function(){ console.log(333)},true);

        oDiv4.addEventListener('click' , function(){ console.log(444)},true);

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

标准浏览器
​​​事件对象.stopPropagation();​​

低版本IE
​​​事件对象.cancelBubble = true;​​

不管是 什么传播方式 事件传播 只到 添加阻止事件传播的标签为止

var oDiv1 = document.querySelector('.div1');
        var oDiv2 = document.querySelector('.div2');
        var oDiv3 = document.querySelector('.div3');
        var oDiv4 = document.querySelector('.div4');

        oDiv1.addEventListener('click' , function(){ console.log(111) });

        oDiv2.addEventListener('click' , function(){ console.log(222) } );

        oDiv3.addEventListener('click' , function(e){ 
            console.log(333) ;
            // 阻止事件的传播
            e.stopPropagation();
        });
        
        oDiv4.addEventListener('click' , function(){ console.log(444) });