JavaScript DOM 事件流

最新推荐文章于 2024-11-04 10:13:26 发布

余月初贰

最新推荐文章于 2024-11-04 10:13:26 发布

阅读量96

点赞数 3

文章标签：前端开发 javascript 前端

mkbk

本文链接：https://blog.csdn.net/m0_68633696/article/details/125620138

版权

事件流：描述的是从页面中接收事件的顺序，事件发生时在元素节点按照一定的顺序执行就叫做DOM事件流。

1.DOM事件的3个阶段

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

document>html>boby>div (当前阶段) 事件捕获过程

(当前阶段) div>boby >html>document 事件冒泡过程

总结：

js代码只能执行捕获或者冒泡的一个阶段

onclick和attachEevent 只能得到冒泡阶段

addEventListener第三个参数为true表示事件捕获阶段调用程序，如果false表示冒泡阶段调用处理程序

实际开发中一般使用冒泡

没有冒泡的事件：onblur,onfocus,onmouseenter,onmouseleave

2.事件冒泡方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="father">
			<div class="son">
				盒子
			</div>
		</div>
		<script type="text/javascript">
			//onclick和attachEvent在冒泡阶段触发
			//冒泡阶段 如果addEventListener第三个参数是false或者省略 
			//son>father>boby>html>document
			var son = document.querySelector('.son');
			给//son注册单击事件
			son.addEventListener('click',function(){
				alert('son');
			},false);
			//给father注册单击事件
			var father = document.querySelector('.father');
			father.addEventListener('click',function(){
				alert('father');
			},false);
			//给document注册单机事件
			document.addEventListener('click',function(){
				alert('document');
			})
		</script>
	</body>
</html>