JS 事件委托，登录切换例子

最新推荐文章于 2022-07-27 14:41:22 发布

ZPD_zpd

最新推荐文章于 2022-07-27 14:41:22 发布

阅读量246

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ZPD_zpd/article/details/110798177

版权

事件委托(事件代理)

优点：

提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

原理：
利用事件冒泡的原理，把事件委托给父级去做

target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

在这里插入图片描述

  <body>
		<ul id="ul">
			<li>li1</li>
			<li>li2</li>
			<li>li3</li>
			<li>li4</li>
			<li>li5</li>
		</ul>
		<script type="text/javascript">
			var ul=document.getElementById("ul");
			
			ul.onclick=function(event){
				var event=event||window.event;
				// console.log(this); //输出的是父级
				// console.log(event); //输出的是子级
				// console.log(event.target); //输出的是子级，target返回事件的目标节点
				console.log(event.target.innerHTML);  //输出子级内容
			}
		</script>
	</body>

举例：登录切换

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				list-style-type: none;
			}

			#box {
				width: 555px;
				height: 300px;
				background-color: #004085;
				margin: 0px auto;
				position: relative;
			}

			#box ul {
				display: flex;
				width: 555px;
				height: 50px;
			}

			#box ul li {
				width: 185px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: #008000;
			}

			#box ul li:hover {
				background-color: #00FFFF;
			}

			#box ol li {
				width: 555px;
				height: 250px;
				background-color: #0F6674;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul id="ul">
				<li class="li">扫描登录</li>
				<li>账号密码登录</li>
				<li>手机号登录</li>
			</ul>
			<ol>
				<li>扫描登录</li>
				<li>账号密码登录</li>
				<li>手机号登录</li>
			</ol>
		</div>

		<script type="text/javascript">
			var ul = document.getElementById("ul")
			var olli = document.querySelectorAll("ol li");
			var ulli = document.querySelectorAll("ul li");
			// 向ulli添加索引
			for (var i = 0; i < ulli.length; i++) {
				ulli[i].index = i;
			}

			//利用事件委托，获取点击元素
			ul.onclick = function(event) {
				var event = event || window.event;
				console.log(event.target.index);
				var index = event.target.index;
				// 利用循环,使其他olli隐藏
				for (var i = 0; i < olli.length; i++) {
					olli[i].style.display = "none";
				}
				// 当前olli显示
				olli[index].style.display = "block";
				// console.log(olli[index])
			}
		</script>
	</body>
</html>

ZPD_zpd

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS 事件委托，登录切换例子

利用事件冒泡的原理，把事件委托给父级去做 <body> <ul id="ul"> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> </ul> <script type="text/javascript"> va
复制链接

扫一扫