JavaScript事件传播简单介绍

事件传播

事件传播顺序

事件传播的顺序是先执行事件捕获，然后执行事件冒泡。

事件传播类型

• 事件捕获
• 事件冒泡

addEventListener(type, listener, options)用于注册事件监听。type是事件监听的类型，listener是事件监听函数，options是一个可选项，默认值是false，表示在事件冒泡阶段监听事件。

options如果是boolean类型，true就是在事件捕获阶段监听事件，false就是在事件冒泡阶段监听事件。
如果是object类型，一般可以接收四个属性：capture，once，passive，signal。详情可以查看addEventListener

事件捕获

假如父子都注册了同一个事件类型，事件捕获就是从外到内依次触发事件。从window，document，html，body，…，.parent，.child。像这样依次查找事件并触发。

事件冒泡

假如父子都注册了同一个事件类型，事件冒泡就是从内到外依次触发事件。从.child，.parent，…，body，html，document，window。像这样依次查找事件并触发。

示例

<style>
.parent {
	width: 200px;
	height: 200px;
	background-color: #99ff99;
}
.child {
	width: 100px;
	height: 100px;
	background-color: aquamarine
}
style>
<div class="parent">
	<div class="child">div>
div>

function captureHandler(e) {
	console.log("---- 事件捕获 ----");
	console.log(e.target);   // 触发事件的元素
	console.log(e.currentTarget);   // 监听事件的元素
}
function bubbleHandler(e) {
	console.log("---- 事件冒泡 ----");
	console.log(e.target);   // 触发事件的元素
	console.log(e.currentTarget);   // 监听事件的元素
}
document.querySelector(".parent")
	.addEventListener("click", captureHandler, true);
document.querySelector(".child")
	.addEventListener("click", captureHandler, true);
document.querySelector(".child")
	.addEventListener("click", bubbleHandler, false);
document.querySelector(".parent")
	.addEventListener("click", bubbleHandler, false);

当点击child元素时，以上事件监听的顺序就是事件传播的顺序


可以看到e.target都是child元素，也就是触发事件的元素，而e.currentTarget就是添加监听事件的元素。并且符合先从外到内的事件捕获，接着从内到外的事件冒泡。

终止事件传播

可以在任意事件传播阶段调用e.stopPropagation()来终止事件传播。

function captureHandler(e) {
	console.log("---- 事件捕获 ----");
	e.stopPropagation();
 	console.log(e.target); // 触发事件的元素
	console.log(e.currentTarget); // 监听事件的元素
}

在captureHandler中添加e.stopPropagation()，再次点击child元素，在事件捕获阶段先触发parent元素的captureHandler，然后事件传播就终止了。

可以试着写四个监听函数，每次只有一个函数添加e.stopPropagation()，然后看看控制台的打印结果与你的推测是否一致。
参考链接：事件顺序、MDN