什么是事件传播、事件冒泡、事件捕获？

一、事件传播

1、概述

（1）当事件发生在DOM元素上时，该事件并不完全发生在那个元素

（2）在冒泡阶段中，事件冒泡或向上传播至父级、祖父级、祖父的父级，直到 window 为止

（3）在捕获阶段中，事件从 window 开始，向下触发元素、事件或 event.target

2、事件传播的三个阶段

（1）捕获阶段——事件从 window 开始，然后向下到每个元素，直到到达目标元素

（2）目标阶段——事件已达到目标元素

（3）冒泡阶段——事件从目标元素冒泡，然后上升到每个元素，直到到达 window

---

二、事件冒泡

1、概述

（1）当事件发生在DOM元素上时，该事件并不完全发生在那个元素上

（2）在冒泡阶段、事件冒泡或者事件发生在它的父级，祖父级，祖父的父级，直到到达 window 为止

2、代码实例

（1）HTML结构

<div class="grandparent"><div class="parent"><div class="child">1</div></div>
</div>

（2）对应的JS代码

function addEvent(el, event, callback, isCapture = false) {if (!el || !event || !callback || typeof callback !== 'function') return;if (typeof el === 'string') {el = document.querySelector(el);};el.addEventListener(event, callback, isCapture);
}addEvent(document, 'DOMContentLoaded', () => {const child = document.querySelector('.child');const parent = document.querySelector('.parent');const grandparent = document.querySelector('.grandparent');addEvent(child, 'click', function (e) {console.log('child');});addEvent(parent, 'click', function (e) {console.log('parent');});addEvent(grandparent, 'click', function (e) {console.log('grandparent');});addEvent(document, 'click', function (e) {console.log('document');});addEvent('html', 'click', function (e) {console.log('html');})addEvent(window, 'click', function (e) {console.log('window');})});

addEventListener 方法具有第三个可选参数 useCapture，其默认值为 false

事件将在冒泡阶段中发生，如果为 true，则事件将在捕获阶段中发生。如果单击 child 元素，它将分别在控制台上记录 child，parent，grandparent，html，document 和 window，这就是事件冒泡

---

三、事件捕获

1、概述

（1）当事件发生在 DOM 元素上时，该事件并不完全发生在那个元素上

（2）在捕获阶段，事件从 window 开始，一直到触发事件的元素

2、代码实例

（1）HTML 结构

<div class="grandparent"><div class="parent"><div class="child">1</div></div>
</div>

（2）对应的JS代码

function addEvent(el, event, callback, isCapture = false) {if (!el || !event || !callback || typeof callback !== 'function') return;if (typeof el === 'string') {el = document.querySelector(el);};el.addEventListener(event, callback, isCapture);
}addEvent(document, 'DOMContentLoaded', () => {const child = document.querySelector('.child');const parent = document.querySelector('.parent');const grandparent = document.querySelector('.grandparent');addEvent(child, 'click', function (e) {console.log('child');});addEvent(parent, 'click', function (e) {console.log('parent');});addEvent(grandparent, 'click', function (e) {console.log('grandparent');});addEvent(document, 'click', function (e) {console.log('document');});addEvent('html', 'click', function (e) {console.log('html');})addEvent(window, 'click', function (e) {console.log('window');})});

addEventListener 方法具有第三个可选参数 useCapture，其默认值为 false

事件将在冒泡阶段中发生，如果为 true，则事件将在捕获阶段中发生。如果单击 child 元素，它将分别在控制台上打印 window，document，html，grandparent 和 parent，这就是事件捕获。