js 事件委托

事件委托原理也很简单,假设你们班都买快递了,快递员需要一个一个打电话送吧,这样搞得化是不是效率太低了,这时候事件委托既体现出他的好了,在不考虑其他利益的时候快递员吧所有快递都给到辅导员,辅导员再群里面发一条信息叫谁来谁就来的吧

如下代码:有一个li 点击哪一个使哪一个变色

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			li{
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		
	 <ul>
	 	<li>1</li>
		 <li>2</li>
		 <li>3</li>
		 <li>4</li>
		 <li>5</li>
		 <li>6</li>
	 </ul>
		<script>
			const ul = document.querySelector('ul')
               ul.addEventListener('click',()=>{
				   // event.target 是返回你点击的这一个元素但是需要该元素是ul的孩子
				   // tagName是返回给标签名字
				   if(event.target.tagName == 'LI'){
					   // 给我们点击的元素变色 这样我们就不用吧所有的li都获取来了
					   e.target.style.backgroundColor = 'red'
				   }
			   })			
		</script>
	</body>
</html>

不用事件委托还需要把所有的lidou获取来,还要使用循环

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值