您现在的位置是:主页 > Web前端技术 > Web前端技术

JavaScript中如何实现事件冒泡与时间捕获

IDCBT2021-12-25服务器技术人已围观

简介小编给大家分享一下JavaScript中如何实现事件冒泡与时间捕获,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! 一、事件冒泡与事件捕获 当我们在Web页面单击某一

小编给大家分享一下JavaScript中如何实现事件冒泡与时间捕获,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

一、事件冒泡与事件捕获

当我们在Web页面单击某一个元素的时候,比如某个p元素。仔细想想,我们单击的不仅仅是这一个p元素,一同被单击的还有以该p为圆心的同心圆元素,比如元素的父,外层body、body的父元素html还有外层的document。事件在这些嵌套的元素之间的传播称为事件流。

    1、事件冒泡

    2、事件捕获

    1、事件冒泡

    IE的事件流称为事件冒泡,事件从最具体的元素开始,逐级向上传播。我们使用DOM0添加的事件处理程序就是在事件冒泡阶段被处理的。例如:

    <html>
      <head>
        <script type="text/javascript">
    
          window.onload = bubblingHandle;      function bubblingHandle() {
              //内层p处理程序
              document.getElementById("inner").onmousedown     = function() {
                  alert("inner p");
              }          //外层p处理程序
              document.getElementById("outer").onmousedown = function() {
                  alert("outerp");
              }
    
              document.onmousedown = function() {
                  alert("document");
              }
          } 
          -->    </script>
      </head>
      <body>
        <p id="outer" style="background-color:black; padding: 15px;">
            <p id="inner" style="background-color:white; padding: 5px;"></p>
        </p>
      </body></html>

    当点击内层的白色p时,会依次显示:

    inner p
    outer p
    document

    事件捕获

    网景提出的事件流称为事件捕获,其与IE几乎相反。事件首先由最不具体的元素接收,然后逐级向具体节点传播。

    标签:

    很赞哦! ()

本栏推荐