DOM模型事件传播机制应用

朴灿烈づ我的快乐病毒、 2022-05-12 00:44 192阅读 0赞

**一 介绍**

DOM模型事件传播先后沿着两个方向传播：在第一阶段，也就是事件捕获阶段，事件从最顶层的对象依次向下传播，因此先触发顶层对象的事件处理函数，然后依次向下，直到传播到事件所发生的最底层对象；接着进入第二阶段，也就是事件冒泡阶段，事件传播一直向上溯，直到最顶层对象。

DOM模型事件传播机制模型如下图

![54643dd4-9586-32e2-a81d-33a6cd7b9f24.png][]

DOM为Event对象提供了stoppropagation（）方法，该方法能阻止事件传播。

**二 代码**

<!DOCTYPE html>
    <html>
    <head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)"/>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
    <title>阻止事件传播</title>
    </head>
    <body>
    友情链接：<br />
    
    <a id="mylink" href="http://www.crazyit.org">疯狂Java联盟</a>
    <div id="show"></div>
    <script type="text/javascript">
    // 事件捕获阶段的处理函数
    var killClick1 =function(event)
    {
    // 取消默认事件的默认行为
     event.preventDefault();
    // 阻止事件传播
     event.stopPropagation();
     document.getElementById("show").innerHTML
    +='事件捕获阶段'+ event.currentTarget +"<br />";
    }
    //事件冒泡阶段的处理函数
    var killClick2 =function(event)
    {
    // 取消事件的默认行为
     event.preventDefault();
    // 阻止事件传播
     event.stopPropagation();
     document.getElementById("show").innerHTML
    +='事件冒泡阶段'+ event.currentTarget +"<br />";
    }
    // // 在事件捕获阶段，分别为超链接对象、document对象绑定事件处理函数。
     document.addEventListener("click", killClick1,true);
     document.getElementById("mylink").addEventListener(
    "click", killClick1,true);
    // 在事件冒泡阶段，分别为超链接对象、document对象绑定事件处理函数。
     document.addEventListener("click", killClick2,false);
     document.getElementById("mylink").addEventListener(
    "click", killClick2,false);
    </script>
    </body>
    </html>

**三 运行结果**

![d0d6b0fc-51da-3e0a-8d5d-b160de0760ab.png][]

[54643dd4-9586-32e2-a81d-33a6cd7b9f24.png]: /images/20220512/8dca6c7570a745e3aa09eb7d647a94e7.png
[d0d6b0fc-51da-3e0a-8d5d-b160de0760ab.png]: /images/20220512/1a4f611990cd4117b1f03b6c9f99cc34.png