DOM事件流与阻止事件传播的方法

DOM事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。

在DOM兼容浏览器中，事件流分为3个阶段

捕获阶段：事件从Document节点自上而下向目标节点传播的阶段。
目标阶段：事件到达目标元素，真正的目标节点正在处理事件的阶段。
冒泡阶段：事件从目标节点自下而上向Document节点传播的阶段。

注：在整个事件流的任何位置通过调用事件的stopPropagation方法可以停止事件的传播过程

触发事件的时机

一个元素事件在冒泡阶段触发还是在捕获阶段触发，根据添加事件的方式不同，事件触发的时机也不同。

捕获型事件：在事件捕获阶段触发执行
冒泡型事件：在事件冒泡阶段触发执行

在html标签中直接绑定的事件

这种事件在冒泡阶段触发

示例，点击.son元素，在控制台先输出“son”，再输出“father”。

<div class="father" onclick="logFather('father', event)">
    <div class="son" onclick="logSon('son', event)"></div>
</div>
<script>
    function logFather(str,event) {
      
      
        console.log(str)
    }
    function logSon(str,event) {
      
      
        console.log(str)
        //event.stopPropagation();//阻止冒泡方式一
        //event.cancelBubble = true;//阻止冒泡方式二
        //阻止冒泡后，点击.son元素时，控制台只输出“son”，不触发父元素的点击事件
    }
</script>

用js分配的事件

这种事件在冒泡阶段触发

<div id="father" style="height: 100px;background-color: rgb(255, 164, 164);">
    <div id="son" style="width:50px;height: 50px;background-color: rgb(255, 248, 151);"></div>
</div>
<script>
    let father = document.getElementById("father"),
        son = document.getElementById("son");
    father.onclick = function(event){
        
        
        console.log('father');
    }
    son.onclick = function(event){
        
        
        console.log('son');
        // event.stopPropagation();//阻止冒泡方式一
        // event.cancelBubble = true;//阻止冒泡方式二
    }
</script>

用addEventListener（）绑定的事件

这种事件可以指定在什么阶段触发

addEventListener(event, function, *useCapture*); 第三个参数"useCapture" 参数用来确定事件在什么阶段触发，参数值为boolean

true：事件在捕获阶段触发

false：事件在冒泡阶段触发

不设置：事件默认在冒泡阶段触发

<div id="myDiv" style="background-color: coral;padding: 20px;">
    <p id="myP" style="background-color: rgb(255, 255, 255);padding: 10px;">点击段落，我是冒泡。</p>
</div>
<div id="myDiv2" style="background-color: rgb(194, 255, 80);padding: 20px;">
    <p id="myP2" style="background-color: rgb(255, 255, 255);padding: 10px;">点击段落，我是捕获。 </p>
</div>
<script>
    document.getElementById("myP").addEventListener("click", function () {
        
        
        alert("你点击了 P 元素!");//点击 #myP 元素时先弹出
        //event.stopPropagation();//阻止冒泡方式一
        //event.cancelBubble = true;//阻止冒泡方式二
    }, false);
    document.getElementById("myDiv").addEventListener("click", function () {
        
        
        alert(" 你点击了 DIV 元素 !");//点击 #myP 元素时后弹出
    }, false);
    document.getElementById("myP2").addEventListener("click", function () {
        
        
        alert("你点击了 P2 元素!");//点击 #myP2 元素时后弹出
    }, true);
    document.getElementById("myDiv2").addEventListener("click", function (event) {
        
        
        alert("你点击了 DIV2 元素 !");//点击 #myP2 元素时先弹出
        // event.stopPropagation(); //也可以阻止事件继续被捕获，添加后事件不再继续传播
        // event.cancelBubble = true;//也可以阻止事件继续被捕获，添加后事件不再继续传播
    }, true);
</script>