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

DOM事件流

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

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

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

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

触发事件的时机

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

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

1. 在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>
   

2. 用js分配的事件

   这种事件在冒泡阶段触发

   <div id="father" style