js事件传播过程

最新推荐文章于 2022-03-02 15:55:36 发布

李壮士

最新推荐文章于 2022-03-02 15:55:36 发布

阅读量992

点赞数 1

分类专栏： js 文章标签： js 事件捕获事件冒泡阻止事件冒泡事件传播

本文链接：https://blog.csdn.net/weixin_44303631/article/details/88319311

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

js事件流，也就是事件触发的顺序，一个完整的JS事件流是从window开始，最后回到window的一个过程。
一般来讲，事件传播会经历两个阶段，事件捕获和事件冒泡。

1.事件捕获

事件从文档的根节点出发，顺着DOM结构向事件的目标节点流去。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达目标节点。
我们通过一段代码看一下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#outer{
				width: 200px;
				height: 200px;
				background: red;
			}
			#inner{
				width: 100px;
				height: 100px;
				background: blue;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<div id="inner"></div>
		</div>
		<script type="text/javascript">
			var outer = document.getElementById("outer");
			var inner = document.getElementById("inner");
			function foo(){
				console.log("inner");
			}
			function bar(){
				console.log("111inner");
			}
			function aa(){
				console.log("outer");
			}
			//同时添加多个相同的事件，事件处理函数依次，不会覆盖
			//inner.addEventListener("click",foo,false);
			//inner.addEventListener("click",bar,false);
			//支持捕获
			inner.addEventListener("click",foo,true);
			outer.addEventListener("click",aa,true);
			//inner.removeEventListener("click",foo);
			//console.log([]==[]);
			
			/*inner.attachEvent("onclick",foo);
			inner.detachEvent("onclick",foo);*/
	
			
		</script>
	</body>
</html>

在这里插入图片描述
同时添加多个相同的事件时，事件处理函数会依次执行，不会覆盖。当我点击蓝色部分（inner）时，输出顺序为outer=>inner。当事件到达目标节点时，事件就进入了目标阶段。事件在目标节点上被触发，然后逆向回流，知道传播到最外层的文档节点。

2.事件冒泡

想像一下，当你向水面扔一颗石子，水波会从落水点向外扩展。事件冒泡，就是
事件在目标事件上触发后，并不在这个元素上终止。它会随着DOM树一层层向上冒泡，直到到达最外层的根节点，一直向上传播，直到document对象。也就是说，同一事件会一次在目标节点的父节点，父节点的父节点…直到最外层的节点上触发。
我们看下面这些代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#outer{
				width: 200px;
				height: 200px;
				background: red;
			}
			#inner{
				width: 100px;
				height: 100px;
				background: blue;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<div id="inner"></div>
		</div>
		<script type="text/javascript">
			var outer = document.getElementById("outer");
			var inner = document.getElementById("inner");
			//由内向外的DOM对象上的事件名一样
			document.onclick = function(){
				console.log("document");
			}
			inner.onclick = function(e){
				var evt = e || event;
				console.log("inner");
				//获取事件源
				var _target = evt.target || evt.srcElement;
				console.log(_target);
				//evt.stopPropagation();
			}
			outer.onclick = function(e){
				var evt = e || event;
				console.log("outer");
				//获取事件源
				var _target = evt.target || evt.srcElement;
				console.log(_target,this);
				//evt.stopPropagation();
				//evt.cancelBubble = true;
				/*if(evt.stopPropagation){
					evt.stopPropagation();
				}else{
					evt.cancelBubble = true;
				}*/
				
			}
			
		</script>
	</body>
</html>

下面是测试截图
在这里插入图片描述

当我点击蓝色部分（inner）时，输出顺序为inner=>outer=>document，也就验证了我们上面一段话。

事件冒泡有时候会给我们带来一些“麻烦”，我们需要阻止事件冒泡：
evt.stopPropagation()
兼容ie浏览器的写法是：
evt.cancelBubble = true
当然，一本万利的写法就是两个都写上：

if(evt.stopPropagation){
	evt.stopPropagation();
		}else{
	   		evt.cancelBubble = true;
}

以上便是本人对js事件传播的一点理解，欢迎大家指出不足。

李壮士

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js事件传播过程

js事件流，也就是事件触发的顺序，一个完整的JS事件流是从window开始，最后回到window的一个过程。一般来讲，事件传播会经历两个阶段，事件捕获和事件冒泡。1.事件捕获事件从文档的根节点出发，顺着DOM结构向事件的目标节点流去。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达目标节点。我们通过一段代码看一下：&lt;!DOCTYPE html&gt;&lt;htm...
复制链接

扫一扫