事件的传播机制

最新推荐文章于 2022-02-10 15:32:37 发布

十里顾情欢

最新推荐文章于 2022-02-10 15:32:37 发布

阅读量353

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_45368052/article/details/106041541

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文深入解析事件传播机制，包括捕获阶段、目标阶段和冒泡传播三个关键阶段。通过实例展示了事件如何从最外层向最里层查找，触发目标元素事件后，再向外层层冒泡，直至window。并通过代码演示了如何使用ev.stopPropagation()阻止事件冒泡。

摘要由CSDN通过智能技术生成

事件的传播机制

1、捕获阶段:从最外层向最里层事件源依次进行查找(目的:是为冒泡阶段事先计算好传播的层级路径) =>CAPTURING_PHASE:1
2、目标阶段:当前元素的相关事件行为触发 =>AT_TARGET:2
3、冒泡传播:触发当前元素的某一个事件行为，不仅它的这个行为被触发了，而且它所有的祖先元素(一直到window)相关的事件行为都会被依次触发(从内到外的顺序) =>BUBBLING_PHASE:3 (Event.prototype)
在这里插入图片描述

<div id="outer">
	<div id="inner">
		<div id="center"></div>
	</div>
</div>
<script>
	// 四次输出的 ev事件相同
	// ev.stopPropagation() 可以阻止事件冒泡
	document.body.onclick = function (ev) {
		console.log("body", ev);
	}
	outer.onclick = function (ev) {
		console.log("outer", ev);
	}
	inner.onclick = function (ev) {
		console.log("inner", ev);
	}
	center.onclick = function (ev) {
		console.log("center", ev);
		// 阻止事件冒泡
		// ev.stopPropagation()
	}
</script>