DOM事件流

最新推荐文章于 2024-11-08 16:09:18 发布

呵呵也不想呵呵

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量83

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_49213878/article/details/125071503

版权

本文介绍了DOM事件流的三个阶段：捕获阶段、当前目标阶段和冒泡阶段，并通过实例展示了如何使用addEventListener方法在不同阶段绑定事件处理程序。在示例中，点击子元素时，先执行父元素在捕获阶段的事件处理函数，再执行子元素在冒泡阶段的函数。

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

DOM事件流

dom事件流分为三个阶段

捕获阶段
当前目标阶段
冒泡阶段

addEventListener(type,listener[,useCaptrue])当第三个参数为true则表示在事件捕获阶段处理程序，如果为false则表示在冒泡阶段处理数据，默认为false ![在这里插入图片描述](https://img-blog.csdnimg.cn/580ccdd0dea445b6a3e3a9926a8c4fbf.png)

例子

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		.father{
			width:300px;
			height:300px;
			border:1px solid red;
		}
		.son{
			width:200px;
			height:200px;
			border:1px solid blue;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
	<script>
		var father=document.querySelector('.father');
		var son=document.querySelector('.son');
		father.addEventListener('click',function(){
			alert('father');
		},true)
		son.addEventListener('click',function(){
			alert('son');
		},false)
	</script>
</body>
</html>