DOM事件流/冒泡阶段，捕获阶段

最新推荐文章于 2023-11-15 10:56:24 发布

httpkaidi

最新推荐文章于 2023-11-15 10:56:24 发布

阅读量95

点赞数

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/httpkaidi/article/details/121617696

版权

javascript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

DOM事件流
事件流描述的是从页面中接受事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

DOM事件分为三个阶段：

捕获阶段
当前目标阶段
冒泡阶段
注意：

JS代码中只能执行捕获或者冒泡其中的一个阶段
onclick 和 attachEvent(ie) 只能得到冒泡阶段
捕获阶段：如果addEventListener 的第三个参数为true 则为捕获阶段，参数为false或者省略则为冒泡阶段
实际开发中很少使用事件捕获，我们更关注事件冒泡
有些事件是没有冒泡的，比如：onblur、onfocus、onmouseenter、onmouseleave
document->html->->body->father->son,

因此下面的代码会先弹出father再弹出son

  <body>
    <div class="father">
      <div class="son"></div>
    </div>
    <script>
      var son = document.querySelector(".son");
      son.addEventListener(
        "click",
        function () {
          alert("son");
        },
        true
      );
       var father = document.querySelector(".father");
      son.addEventListener(
        "click",
        function () {
          alert("father");
        },
        true
      );
    </script>
  </body>

冒泡阶段：如果addEventListener 的第三个参数为false或者省略则为冒泡阶段
son->father->body->html->document
因此下面的代码会先弹出son再弹出father最后弹出document

      var son = document.querySelector(".son");
      son.addEventListener(
        "click",
        function () {
          alert("son");
        },
        false
      );
      var father = document.querySelector(".father");
      son.addEventListener(
        "click",
        function () {
          alert("father");
        },
        false
      );
       document.addEventListener("click", function () {
        alert("document");
      });

httpkaidi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM事件流/冒泡阶段，捕获阶段

DOM事件流事件流描述的是从页面中接受事件的顺序事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流DOM事件分为三个阶段：捕获阶段当前目标阶段冒泡阶段注意：JS代码中只能执行捕获或者冒泡其中的一个阶段onclick 和 attachEvent(ie) 只能得到冒泡阶段捕获阶段：如果addEventListener 的第三个参数为true 则为捕获阶段，参数为false或者省略则为冒泡阶段实际开发中很少使用事件捕获，我们更关注事件冒泡有些事件是没有冒泡的
复制链接

扫一扫