事件捕获、事件冒泡

最新推荐文章于 2024-04-17 11:31:34 发布

向菜鸟开发迈进

最新推荐文章于 2024-04-17 11:31:34 发布

阅读量219

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_28842789/article/details/105975205

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

摘抄

当一个DOM事件被触发时，它不仅仅只是单纯地在本身对象上触发一次，而是会经历三个不同的阶段：

捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；
目标阶段：到达目标事件位置（事发地），触发事件；
冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

来源：https://blog.csdn.net/ywl570717586/article/details/70888020

正文

绑定在被点击元素的事件是按照代码顺序发生，其他元素通过冒泡或者捕获“感知”的事件，按照W3C的标准，先发生捕获事件，后发生冒泡事件。所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件。

addEventListener函数的第三个参数设置为true为捕获事件，false为冒泡事件。

<body onload="load();">
<div id="d1" style="width: 400px; height: 400px; border: solid 1px;">
    <div id="d2" style="width: 200px; height: 200px; border: solid 1px;">
        <div id="d3" style="width: 100px; height: 100px; border: solid 1px;">one</div>
    </div>
</div>
</body>

栗子1（捕获）

<script type="text/javascript">
      function load() {
        div1 = document.getElementById("d1");
        div2 = document.getElementById("d2");
        div3 = document.getElementById("d3");

        div1.addEventListener("click", (e) => {
          console.log("div1被点击，监听触发于捕获阶段");
        }, true);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于捕获阶段");
        }, true);
        div3.addEventListener("click", (e) => {
          console.log("div3被点击，监听触发于捕获阶段");
        }, true);    
      }
    </script>

点击div3

栗子2（冒泡）

<script type="text/javascript">
      function load() {
        div1 = document.getElementById("d1");
        div2 = document.getElementById("d2");
        div3 = document.getElementById("d3");

        div1.addEventListener("click", (e) => {
          console.log("div1被点击，监听触发于冒泡阶段");
        }, false);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于冒泡阶段");
        }, false);
        div3.addEventListener("click", (e) => {
          console.log("div3被点击，监听触发于冒泡阶段");
        }, false);

      }
 </script>

点击div3

栗子3（组合，先设置捕获，后设置冒泡）

 <script type="text/javascript">
      function load() {
        div1 = document.getElementById("d1");
        div2 = document.getElementById("d2");
        div3 = document.getElementById("d3");

        div1.addEventListener("click", (e) => {
          console.log("div1被点击，监听触发于捕获阶段");
        }, true);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于捕获阶段");
        }, true);
        div3.addEventListener("click", (e) => {
          console.log("div3被点击，监听触发于捕获阶段");
        }, true);

        div1.addEventListener("click", (e) => {
          console.log("div1被点击，监听触发于冒泡阶段");
        }, false);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于冒泡阶段");
          // e.stopImmediatePropagation();
        }, false);
        div3.addEventListener("click", (e) => {
          console.log("div3被点击，监听触发于冒泡阶段");
        }, false);

      }
    </script>

点击div3 ，div1和div2不是真正被点击的目标元素，按照先捕获后冒泡顺序执行。div1和div2的捕获函数执行以后，轮到div3触发事件的时候，因为代码中先设置的捕获监听，后设置的冒泡监听，所以先触发了捕获函数的执行。

栗子4（组合，先设置冒泡，后设置捕获）

<script type="text/javascript">
      function load() {
        div1 = document.getElementById("d1");
        div2 = document.getElementById("d2");
        div3 = document.getElementById("d3");

        div1.addEventListener("click", (e) => {
          console.log("div1被点击，监听触发于冒泡阶段");
        }, false);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于冒泡阶段");
        }, false);
        div3.addEventListener("click", (e) => {
          console.log("div3被点击，监听触发于冒泡阶段");
        }, false);

        div1.addEventListener("click", (e) => {
          console.log("div1被点击，监听触发于捕获阶段");
        }, true);
        div2.addEventListener("click", (e) => {
          console.log("div2被点击，监听触发于捕获阶段");
        }, true);
        div3.addEventListener("click", (e) => {
          console.log("div3被点击，监听触发于捕获阶段");
        }, true);

      }
</script>

点击div3 ，div1和div2不是真正被点击的目标元素，按照先捕获后冒泡顺序执行。div1和div2的捕获函数执行以后，轮到div3触发事件的时候，因为代码中先设置的冒泡监听，后设置的捕获监听，所以先触发了冒泡函数的执行。

向菜鸟开发迈进

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
事件捕获、事件冒泡

摘抄当一个DOM事件被触发时，它不仅仅只是单纯地在本身对象上触发一次，而是会经历三个不同的阶段：捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；目标阶段：到达目标事件位置（事发地），触发事件；冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。来源：https://blog.csdn.net/ywl570717586/ar...
复制链接

扫一扫

专栏目录