js 事件流捕获阶段冒泡阶段目标阶段

原创

wangjun5159 2023-06-28 14:16:37 ©著作权

©著作权归作者所有：来自51CTO博客作者wangjun5159的原创作品，请联系作者获取转载授权，否则将追究法律责任

问题

<html  id="myhtml">
	<head>
		<meta charset="utf-8" />
		<title>event bubble/capture</title>
	</head>
	<body  id="mybody">
		<div  id="mydiv">
			click me ....
		</div>
	</body>
	<script type="text/javascript">
	
		document.getElementById("mydiv").addEventListener("click",function(){
			console.log("div");
		});
		
		document.getElementById("mybody").addEventListener("click",function(){
			console.log("body");
		});
		
		document.getElementById("myhtml").addEventListener("click",function(){
			console.log("html");
		});
	</script>
	</html>

先来看一个问题，点击div时，打印顺序是div>body>html 还是 html>body>div?

在历史上，有一部分浏览器厂商采用了第一种方案，有一部分采用了第二种方案。第一种方案是由近及远，由里往外，一直往上冒泡，称为“冒泡阶段”。第二种是由外往里，由远及近，称为“捕获阶段”，当事件到达节点时称为“目标阶段”。

js 事件流捕获阶段冒泡阶段目标阶段_javascript

后来DOM模型，将这三个事件阶段统一到一个模型里，“捕获阶段”、“目标阶段”、“冒泡阶段”，默认的，在冒泡阶段触发监听器。 所以，上述例子的输出是，div>body>html

当然也可以，在捕获阶段触发监听器，输出是html>body>div。

target.addEventListener(type, listener, useCapture);

var capture = true;
		document.getElementById("mydiv").addEventListener("click",function(){
			console.log("div");
		},capture);
		
		document.getElementById("mybody").addEventListener("click",function(){
			console.log("body");
		},capture);
		
		document.getElementById("myhtml").addEventListener("click",function(){
			console.log("html");
		},capture);