Python学习 Day34 DOM批量添加事件

最新推荐文章于 2022-07-13 17:40:17 发布

ShengXIABai

最新推荐文章于 2022-07-13 17:40:17 发布

阅读量188

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/ShengXIABai/article/details/115407556

版权

前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

DOM批量添加事件

批量添加事件

概述：在一些特定场景下，有很多相同节点（标签），需要添加相同的事件，就可以批量添加事件

一、获取全部节点遍历

步骤：
1.获取全部节点
2.循环语句遍历数组，给数组里面每一个元素绑定事件

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				width: 100%;
				list-style: none;
				height: 60px;
				background: gray;
			}
			li{
				float: left;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>军事</li>
			<li>直播</li>
			<li>美妆</li>
			<li>体育</li>
			<li>汽车</li>
			<li>摄影</li>
		</ul>
	</body>
</html>
<script type="text/javascript">
	var liArr = document.getElementsByTagName('li');
	for( var i = 0 ; i < liArr.length ; i++){
		//循环语句先执行完毕，才是事件处理函数
		//在每一个IIFE的作用域里面给元素绑定单击事件
			+function(index){
				liArr[index].onclick = function(){
				//单击的时候触发事件处理函数
				liArr[index].style.color = 'red';
			}
		}(i);
	}
	console.log('循环语句结束了' + i);

在这里插入图片描述

二、函数上下文this

函数上下文this

概述：在函数体中有上下文this的概念，当用户触发了某个元素的事件之后，函数的上下文即为触发这个事件的元素

var liArr = document.getElementsByTagName('li');
	for( var i = 0 ; i < liArr.length ; i++){
		liArr[i].onclick = function(){
			this.style.color = 'red';
		}
	}

在这里插入图片描述

三、案例

1.网易云音乐头部菜单效果

样式部分

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.container{
				width: 100%;
				height: 60px;
				background: #C20C0C;
			}
			ul{
				width: 50%;
				list-style: none;
				height: 60px;
				margin: 0 auto;
			}
			ul li{
				float: left;
				color: white;
				font-size 12px;
				width: 65px;
				height: 20px;
				text-align: center;
				border-radius: 10px 10px 10px 10px;
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<ul>
				<li>推荐</li>
				<li>排行榜</li>
				<li>歌单</li>
				<li>主播电台</li>
				<li>歌手</li>
				<li>新碟上架</li>
			</ul>
		</div>
	</body>

批量添加事件

<script type="text/javascript">
	 //获取全部节点
	 var listArr = document.getElementsByTagName('li');
	 //批量添加事件
	 for( var i = 0 ;i < listArr.length ; i++){
	 	+function(index){
	 		//每一个li元素绑定事件
	 		listArr[index].onmouseenter = function(){
	 			//当鼠标移上每一个节点的时候
	 			//将全部li节点样式和起始状态一样
	 			for(var j = 0 ; j < listArr.length ; j++){
	 				listArr[j].style.background = '#C20C0C';
	 				listArr[j].style.borderRadius = 'none';
	 			}
	 			//当前鼠标移上的结点样式进行修改
	 			listArr[index].style.background = 'rgb(0,0,0,0.3)'
	 			//圆角设置
	 			listArr[index].style.borderRadius = '10px 10px 10px 10px ';
	 		}
	 		//每个节点绑定鼠标移出事件
	 		listArr[index].onmouseleave = function(){
	 			listArr[j].style.background = '#C20C0C';
	 		    listArr[j].style.borderRadius = 'none';
	 		}
	 	}(i)
	 }
</script>

效果
在这里插入图片描述

2.淘宝二级菜单

样式部分

<style type="text/css">
			*{
			  margin: 0;
			  padding: 0;
			}
			.container{
				width: 80%;
				height: 400px;
				margin: 30px auto;
				border: 1px solid black;
			}
			.container div{
				float: left;
			}
			}
			#left{
				width: 19%;
				height: 100%;
			}
			#right{
				width: 80%;
				height: 100%;
				/*隐藏元素*/
				display: none;
				border-left: 1px solid black;
			}
			#left ul{
				width: 100%;
				list-style: none;
			}
			#left li{
				text-align: center;
				height: 30px;
				margin: 10px 0px;/*上下10，左右0*/
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div id="left">
			   <ul>
			   	<li>女装 / 男装  / 内衣</li>
			   	<li>鞋靴 / 箱包  / 配件</li>
			   	<li>童装玩具 / 孕产  / 用品</li>
			   	<li>家电 / 数码  / 手机</li>
			   	<li>美妆 / 洗护  / 保健品</li>
			   </ul>
			</div>
			<div id="right">
				购买物品信息
			</div>
		</div>
	</body>

批量添加事件

<script type="text/javascript">
	//获取全部li节点
	var liArr = document.getElementsByTagName('li');
	//获取右侧节点
	var rt  = document.getElementById('right');
	//给全部元素批量添加事件
	for(var i = 0 ; i < liArr.length ; i++){
		+function(index){
			//鼠标进入
			liArr[index].onmouseenter = function(){
				//先将全部li的文字样式恢复起始状态
				for( var j = 0 ; j < liArr.length ; j++){
					liArr[j].style.color = 'black';
				}
				//当前选中节点的文字颜色为粉色
				liArr[index].style.color = 'pink';
				//右侧展示内容部分显示
				rt.style.display = 'block';
				rt.innerHTML = '购买物品是'+index;
			}
			//鼠标移出
			liArr[index].onmouseleave = function(){
				rt.style.display = 'none';
			}
		}(i);
	}
</script>