querySelectorAll方法趣题

最新推荐文章于 2022-07-13 13:42:39 发布

Koon_AgueroAgnis

最新推荐文章于 2022-07-13 13:42:39 发布

阅读量224

点赞数

文章标签： querySelectorAll JS 面试题

本文链接：https://blog.csdn.net/guoxiaozhuang4/article/details/80065009

版权

1. 题目：点击一个列表，输出对应的索引

2. 实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		
		<script type="text/javascript">
			
			var lis = document.querySelectorAll('ul li')
			
			//第一种做法，使用ES6的let循环添加事件监听
			for(let i=0;i<lis.length;i++) {
				
				lis[i].addEventListener('click', function() {
					
					console.log(i)
				})
			}
			
			//第二种做法，使用立即执行函数设置一个块作用域，隔离i的值
			for(var i=0;i<lis.length;i++) {
				
				(function(i) {
					
					lis[i].addEventListener('click', function() {
						
						console.log(i)
					})
				})(i)
			}
			
			//第三种做法
			var ul = document.querySelector('ul')
			
			ul.addEventListener('click', function(e) {
				
				var target = e.target
				
				console.log([].indexOf.call(lis, target))
			})
			
		</script>
		
	</body>
</html>

至此。