当前位置：首页 > article >正文

前端学习-事件流，事件捕获，事件冒泡以及阻止冒泡以及相应案例（二十八）

article 2025/1/13 12:11:08

前言

事件流与两个阶段说明

说明

事件捕获

目标

说明

事件冒泡

目标

事件冒泡概念

简单理解

阻止冒泡

目标

语法

注意

综合示例代码

总结

前言

梳洗罢，独倚望江楼。过尽千帆皆不是，斜晖脉脉水悠悠。肠断白蘋洲

事件流与两个阶段说明

事件流指的是事件完整执行过程中的流动路径

事件捕获：大到小

事件冒泡：小到大

说明

假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段简单来说:捕获阶段是从父到子冒泡阶段是从子到父实际工作都是使用事件冒泡为主，很少使用捕获

事件捕获

目标

简单了解事件捕获执行过程事件捕获概念:从DOM的根元素开始去执行对应的事件(从外到里)事件捕获需要写对应代码才能看到效果代码:DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

说明

addEventListener第三个参数传入 true 代表是捕获阶段触发(很少使用）

若传入false代表冒泡阶段触发，默认就是false

若是用LO事件监听，则只有冒泡阶段，没有捕获

事件冒泡

目标

能够说出事件冒泡的执行过程

事件冒泡概念

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

简单理解

当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

事件冒泡是默认存在的

L2事件监听第三个参数是 false，或者默认都是冒泡

阻止冒泡

目标

能够写出阻止冒泡的代码问题:因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素需求:若想把事件就限制在当前元素内，就需要阻止事件冒泡前提:阻止事件冒泡需要拿到事件对象

语法

事件对象.stopPropagation()

注意

此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

综合示例代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件冒泡示例</title>
  <style>
    .outer {
      width: 300px;
      height: 200px;
      background-color: lightblue;
      padding: 20px;
      text-align: center;
    }

    .middle {
      width: 200px;
      height: 150px;
      background-color: lightgreen;
      padding: 20px;
      text-align: center;
    }

    .inner {
      width: 100px;
      height: 100px;
      background-color: lightcoral;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="outer" id="outer">
    外层元素
    <div class="middle" id="middle">
      中间元素
      <div class="inner" id="inner">
        内层元素
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // 获取外层、中间和内层元素
      const outerElement = document.getElementById('outer');
      const middleElement = document.getElementById('middle');
      const innerElement = document.getElementById('inner');

      // 为外层元素添加点击事件监听器
      outerElement.addEventListener('click', function (event) {
        console.log('外层元素被点击');
      });

      // 为中间元素添加点击事件监听器
      middleElement.addEventListener('click', function (event) {
        console.log('中间元素被点击');
      });

      // 为内层元素添加点击事件监听器，并阻止事件冒泡
      innerElement.addEventListener('click', function (event) {
        console.log('内层元素被点击');
        event.stopPropagation(); // 阻止事件冒泡
      });
    });
  </script>
</body>

</html>