事件捕获和事件冒泡？阻止事件冒泡，默认事件的发生

yuayu121

已于 2022-08-31 18:29:29 修改

阅读量317

点赞数 2

文章标签： javascript 前端 html

于 2022-08-30 19:49:19 首次发布

本文链接：https://blog.youkuaiyun.com/qq_57126801/article/details/126610354

版权

事件捕获和事件冒泡

首先我们先了解什么是事件流？
事件流描述了页面接收事件的顺序，先捕获（由外到内），到事件源，在冒泡（由内到外）。
三个阶段：捕获，事件源，冒泡
![](https://img-blog.csdnimg.cn/5730323d6e7d4a4cadf8f813b42eb677.png

1.事件捕获(Netscape事件流)

事件捕获的意思是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截事件。（由外到内）
案例：

 <style>
      #div1 {
        width: 400px;
        height: 400px;
        border: 1px solid red;
        text-align: center;
      }
      #p1 {
        display: inline-block;
        width: 200px;
        height: 200px;
        border: 1px solid red;
        text-align: center;
      }
      #a1 {
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }
    </style>
    <script>
      window.onload = function () {
        var div = document.querySelectorAll("div,p,a");
        // console.log(div[0]);
        function divClick() {
          console.log(this.tagName + '被点击了');
        }
        for (var key of div) {
          key.addEventListener("click", divClick,true);//监听事件的第三个参数为true时是事件捕获，默认值为false（事件冒泡）
        }
       // div[0].removeEventListener("click", divClick, true);
      };
    </script>
  </head>
  <body>
    <div id="div1">
      我是div
      <p id="p1">
        我是p
        <a id="a1">我是a</a>
      </p>
    </div>
  </body>

效果图：
![在这里插入图片描述](https://img-blog.csdnimg.cn/98fda8bec64546a394c482fecd34a95d.png

点击最里面的a标签时，由最外面的div开始往里寻找目标标签a，因为全部元素都被绑定了点击事件，所以由外到内一次触发。
在这里插入图片描述
由于旧版本浏览器不支持，因此实际当中几乎不会使用事件捕获。通常建议使用事件冒泡，特殊情况下可以使用事件捕获。

即使事件源没有绑定相关事件，也会发生事件捕获和冒泡。（例子：如果上述的a标签没有绑定点击事件，被点击的时候也会发生事件捕获）

2.事件冒泡(IE事件流)

IE 事件流被称为事件冒泡，这是因为事件被定义为从最具体的元素（文档树中最深的节点）开始触发，然后向上传播至没有那么具体的元素（文档）。（由内到外）
案例：

 <style>
      #div1 {
        width: 400px;
        height: 400px;
        border: 1px solid red;
        text-align: center;
      }
      #p1 {
        display: inline-block;
        width: 200px;
        height: 200px;
        border: 1px solid red;
        text-align: center;
      }
      #a1 {
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }
    </style>
    <script>
      window.onload = function () {
        var div = document.querySelectorAll("div,p,a");
        // console.log(div[1]);
        function divClick() {
          console.log(this.tagName + "被点击了");
        }
        for (var key of div) {
          key.addEventListener("click", divClick, false);//第三个参数为false，为事件冒泡
        }
        // div[0].removeEventListener("click", divClick, false);
      };
    </script>
  </head>
  <body>
    <div id="div1">
      我是div
      <p id="p1">
        我是p
        <a id="a1">我是a</a>
      </p>
    </div>
  </body>

效果图如上，就不放了。
点击最里面的a标签，最先触发 click 事件。然后，click 事件沿DOM 树一路向上，在经过的每个节点上依次触发，直至到达 document 对象，所以div，p触发点击事件。
在这里插入图片描述
事件冒泡可能会使绑定相同事件的父子元素一同触发，会达不到我们想要的效果，所以有时我们要阻止冒泡事件。