请问您对DOM事件流是怎样理解的?

最新推荐文章于 2024-06-22 01:32:46 发布

路人甲小码

最新推荐文章于 2024-06-22 01:32:46 发布

阅读量240

点赞数 3

分类专栏： javascript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_44111864/article/details/86696810

版权

javascript 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

一.先说一下事件冒泡及事件捕获
1.事件冒泡：当触发了某个元素的某类型的事件，那么它的父级元素同类型的事件也会被触发。
依次类推直到最根的元素（HTML），就再也不冒泡了。
即从当前元素一直朝父级元素冒泡。
2.事件捕获：和事件冒泡的顺序相反。先触发根元素，再依次朝子元素进行触发，直到当前元素（真正的事件源）为止。

二、比较几种事件绑定的方式
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#grandpaDiv{
				width:400px;
				height:400px;
				background-color:red;
			}	
			#fatherDiv{
				width:300px;
				height:300px;
				background-color:yellow;
			}	
			#meDiv{
				width:200px;
				height:200px;
				background-color:pink;
			}	
		</style>
	</head>
	<body>
		<div id="grandpaDiv">
			<div id="fatherDiv">
				<div id="meDiv">
				</div>
			</div>
		</div>	
	</body>
</html>
<script type="text/javascript">

//DOM事件流：事件流就是事件的流向，共经历三个阶段，分别是
//1、第一个阶段：捕获阶段
//2、第二个阶段：事件源阶段
//3、第三个阶段：冒泡阶段。

//这是个u型。

function $(id){
	return document.getElementById(id);
}

window.onload = function(){
	//事件捕获	

	$("meDiv").addEventListener("click",function(){		
		console.log("我被点了");
	},true);
		
	
//事件冒泡

	$("grandpaDiv").addEventListener("click",function(){
		console.log("冒泡：爷爷被点了");
	},false);
	
	$("fatherDiv").addEventListener("click",function(){
		console.log("冒泡：爸爸被点了");
	},false);
	

	
	$("grandpaDiv").addEventListener("click",function(){
		console.log("捕获:爷爷被点了");
	},true);
	
	$("fatherDiv").addEventListener("click",function(){
		console.log("捕获:爸爸被点了");
	},true);

	
	

}
</script>