捕获与冒泡

最新推荐文章于 2023-07-05 11:07:41 发布

努力奔跑的小孩

最新推荐文章于 2023-07-05 11:07:41 发布

阅读量260

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_37224632/article/details/127521336

版权

1.概念

冒泡事件：事件由子元素传递到父元素的过程叫做冒泡（false）。
捕获事件：事件由父元素传递到子元素的过程叫做事件捕获（ture）。
所谓DOM事件流，指的是这三个阶段：事件捕获 ➔ 目标事件 ➔ 事件冒泡。

2.addEventListener方法

element.addEventListener(event, function, useCapture)
第一个参数是要绑定的事件，第二个参数是事件要执行的函数，第三个参数默认是false,代表在冒泡阶段（false）还是捕获阶段（true）处理要执行的函数。

3.例子

  <body>
    <div id="box1">
      <div id="box2">
        <div id="box3">
          <div id="box4">
            <div id="box5"></div>
          </div>
        </div>
      </div>
    </div>
    <script>
      var box1 = document.getElementById("box1");
      var box2 = document.getElementById("box2");
      var box3 = document.getElementById("box3");
      var box4 = document.getElementById("box4");
      var box5 = document.getElementById("box5");

      box1.addEventListener("click",function () {
          console.log("box1");
      }, true);
      box2.addEventListener("click",function () {
          console.log("box2");
      }, false);
      box3.addEventListener("click",function () {
          console.log("box3");
      }, true);
      box4.addEventListener("click",function () {
          console.log("box4");
      }, false);
      box5.addEventListener("click",function () {
          console.log("box5");
      }, true);
    </script>
  </body>

点击box5,打印顺序为：box1，box3，box5， box4， box2
解析：事件捕获 ➔ 目标事件 ➔ 事件冒泡
1.box1，发现是捕获事件，执行输出box1
2.box2，发现是冒泡事件，先不执行，等到事件冒泡阶段再执行
3.box3，发现是捕获事件，执行输出box3
4.box4，发现是冒泡事件，先不执行，等到事件冒泡阶段再执行
5.box5，到达目标事件，执行输出box5
6.box4，发现是冒泡事件，执行输出box4
7.box3，发现是捕获事件，不执行
8.box2，发现是冒泡事件，执行输出box2
9.box1，发现是捕获事件，不执行

点击box3,打印顺序为 box1，box3，box2
一样的解析过程从box1 ➔ box2 ➔ box3（目标事件） ➔ box2 ➔ box1

4.阻止冒泡
event.stopPropagation();

  box4.addEventListener("click",function () {
      event.stopPropagation()
      console.log("box4");
  }, false);

这里我们不给box5加而是给box4添加event.stopPropagation();那么点击box5会发生什么呢
打印顺序为box1，box3，box5， box4
在box4那阻止了继续向上传播

努力奔跑的小孩

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
捕获与冒泡

捕获与冒泡
复制链接

扫一扫