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

最新推荐文章于 2022-02-07 22:03:00 发布

原创最新推荐文章于 2022-02-07 22:03:00 发布 · 723 阅读

CC 4.0 BY-SA版权

问题

<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?
在历史上，有一部分浏览器厂商采用了第一种方案，有一部分采用了第二种方案。第一种方案是由近及远，由里往外，一直往上冒泡，称为“冒泡阶段”。第二种是由外往里，由远及近，称为“捕获阶段”，当事件到达节点时称为“目标阶段”。
在这里插入图片描述
后来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);