js 事件传播机制、事件委托

神奇大叔

已于 2023-06-30 11:25:58 修改

阅读量1k

点赞数

分类专栏： javaScript 文章标签： javascript 前端开发语言

于 2021-12-16 14:45:22 首次发布

本文链接：https://blog.csdn.net/weixin_43294560/article/details/121974067

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏

文章目录

事件传播过程
事件委托
为什么一般在冒泡阶段, 而不是在捕获阶段注册监听

事件传播过程

事件捕获阶段：从window对象传导到目标节点
目标阶段：事件在目标节点上触发
- 处于事件冒泡的第一个阶段，也就是冒泡阶段的 target 触发事件，所以目标阶段也会被当做事件冒泡的一部分
冒泡阶段：从目标节点传回window对象

在这里插入图片描述

当我们点击了一个事件，首先做的的第一件事就是从外层的元素，直接穿梭到我们的目标元素，这个阶段会执行所有捕获阶段的函数
然后事件流切换到目标阶段，执行自身的事件函数
这时候事件流在沿着相反的方向一直向上执行所有函数

在dom节点绑定过多的监听事件，必定造成内存浪费。所以就有一种优化：就是事件委托

事件委托

利用事件的冒泡特性，把多个子元素的同一类型的监听逻辑，合并到父元素上通过一个监听函数来管理的行为，就是事件委托
在上级元素配合event.target，对其子元素操作

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul{
				list-style: none;
			}
			li{
				width:100px;
				height:40px;
				text-align: center;
				line-height: 40px;
				float:left;
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>你好</li>
			<li>我好</li>
			<li>大家好</li>
			<li>才是真的好</li>
		</ul>
		
		<script>
			var ul=document.querySelector('ul');
			var lis=document.querySelectorAll("li");
			
			//委托案例一
	/*		ul.οnclick=function(event){
				var event=event||window.event;
				
				console.log(event.target.innerHTML);
			}*/
			
			//委托案例二
			ul.onmouseover=function(event)
			{
				var event=event||window.event;
				event.target.style.backgroundColor="yellow";  //委托，		
			}
			
			ul.onmouseout=function(event)
			{
				var event=event||window.event;
				event.target.style.backgroundColor="orange";
			}
			
			for(var i=0;i<3;i++)
			{
				var li=document.createElement("li");
				li.innerHTML="li"+i;
				ul.appendChild(li);
			}
		</script>
	</body>
</html>

为什么一般在冒泡阶段, 而不是在捕获阶段注册监听

易于管理和委托：在冒泡阶段注册监听器使得事件委托更容易实现。你可以在父元素上注册一个监听器，捕捉所有子元素触发的事件。这使得添加、删除子元素时，无需处理子元素的事件监听器，降低了内存占用和处理开销。
兼容性：在早期的浏览器中（如 IE 6/7/8），并不支持捕获阶段的事件监听。因此，在冒泡阶段注册事件监听器可以确保代码在更广泛的浏览器中正常工作。
在某些用例下，如在事件到达目标元素之前完成一些操作，可以考虑在捕获阶段注册监听器。

神奇大叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 事件传播机制、事件委托

当我们点击了一个事件，首先做的的第一件事就是从外层的元素，直接穿梭到我们的目标元素，这个阶段会执行所有捕获阶段的函数。在dom节点绑定过多的监听事件，必定造成内存浪费。所以就有一种优化：就是事件委托。这时候事件流在沿着相反的方向一直向上执行所有函数。事件捕获阶段：从window对象传导到目标节点。然后事件流切换到目标阶段，执行自身的事件函数。冒泡阶段：从目标节点传回window对象。目标阶段：事件在目标节点上触发。
复制链接

扫一扫