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;<