目录
前言
事件流与两个阶段说明
说明
事件捕获
目标
说明
事件冒泡
目标
事件冒泡概念
简单理解
阻止冒泡
目标
语法
注意
综合示例代码
总结
前言
梳洗罢，独倚望江楼。过尽千帆皆不是，斜晖脉脉水悠悠。肠断白蘋洲
事件流与两个阶段说明
事件流指的是事件完整执行过程中的流动路径
事件捕获：大到小
事件冒泡：小到大
说明
假设页面里有个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>总结
玉炉香，红烛泪，偏照画堂秋思