目录时间冒泡与捕获概念（1）捕获阶段（Capture Phase）（2）目标阶段（Target Phase）（3）冒泡阶段（Bubble Phase）举例代码冒泡模拟模拟结果捕获模拟模拟结果如下addEventListener函数补充语法时间冒泡与捕获...

时间冒泡与捕获

概念

一般的，事件分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

（1）捕获阶段（Capture Phase）

事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径，在冒泡阶段，事件会通过这个路径回溯到文档跟节点。

（2）目标阶段（Target Phase）

当事件到达目标节点的，事件就进入了目标阶段。事件在目标节点上被触发，然后会逆向回流，直到传播至最外层的文档节点。

（3）冒泡阶段（Bubble Phase）

事件在目标元素上触发后，并不在这个元素上终止。它会随着DOM树一层层向上冒泡，回溯到根节点。
冒泡过程非常有用。它将我们从对特定元素的事件监听中释放出来，如果没有事件冒泡，我们需要监听很多不同的元素来确保捕获到想要的事件。

作者：韩宝亿
链接：https://www.jianshu.com/p/8311f782f70d
来源：简书

举例代码

冒泡模拟

<html>
<head>
</head>
<body>
	<div id="content1">
		<ul id="ul">
			<li>
				<a>
					点击
				</a>
			</li>
		</ul>
	</div>
</body>
<script>
	function getNode(name) {
		return document.getElementsByTagName(name)[0]
	}

	const top1 = getNode('div')
	const ul1 = getNode('ul')
	const li1 = getNode('li')
	const a1 = getNode('a');
//get the node 
	top1.addEventListener('click', (e) => {

		console.log("div");
	})
	ul1.addEventListener('click', (e) => {

		console.log("ul");
	})
	li1.addEventListener('click', (e) => {

		console.log("li");
	})
	a1.addEventListener('click', (e) => {

		console.log("a");
	})
	//add function 
</script>
</html>

模拟结果

该代码模拟了冒泡的情况，即事件会从触发的节点一直向外冒泡，直到回溯到根节点。
模拟的情况如下图，由根节点先触发，再一层层向外传递。

捕获模拟

代码如下：
基本同上，添加的事件修改参数即可

<html>
<head>
</head>
<body>
	<div id="content1">
		<ul id="ul">
			<li>
				<a>
					点击
				</a>
			</li>
		</ul>
	</div>
</body>
<script>
	function getNode(name) {
		return document.getElementsByTagName(name)[0]
	}

	const top1 = getNode('div')
	const ul1 = getNode('ul')
	const li1 = getNode('li')
	const a1 = getNode('a');

	top1.addEventListener('click', (e) => {

		console.log("div");
	},true)
	ul1.addEventListener('click', (e) => {

		console.log("ul");
	},true)
	li1.addEventListener('click', (e) => {

		console.log("li");
	},true)
	a1.addEventListener('click', (e) => {

		console.log("a");
	},true)
</script>
</html>