Js循环绑定事件处理

最新推荐文章于 2022-05-08 20:13:34 发布

webnoob

最新推荐文章于 2022-05-08 20:13:34 发布

阅读量2.4k

点赞数

分类专栏： JS/Node

本文链接：https://blog.csdn.net/Szu_AKer/article/details/51683666

版权

JS/Node 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

很多时候我们在开发过程需要for循环给元素组绑定js事件，但是直接敲的话，事件响应的效果只能和最后一个元素一样，如下面的错误代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js闭包运用</title>
</head>
<body>
	<button>1</button>
	<button>2</button>
	<button>3</button>
	
</body>
</html>
<script>
	var btn=document.getElementsByTagName('button');
	for(var i=0;i<3;i++){
		btn[i].οnclick=function(){
			console.log(i);
		}
	}
</script>

这是js闭包的经典运用场景，有多种方法解决它。

第一种，可以利用(function)()，如下改进代码：

<script>
	var btn=document.getElementsByTagName('button');
	for(var i=0;i<3;i++){
		(function(val){
			btn[i].οnclick=function(){
				console.log(val);
			}
		})(i);
	}
</script>

第二种方法：写多一个函数，在该函数写一个闭包，js代码如下：

<script>
	var btnshow=function(val){
		return function(){
			console.log(val);
		}
	}
	var btn=document.getElementsByTagName('button');
	for(var i=0;i<3;i++){
		btn[i].οnclick=btnshow(i);
	}
	
</script>

第三种可以利用jquert的$.each()

<script>
	$(function(){
		btn=document.getElementsByTagName('button');
		$.each([0,1,2],function(index,value){
			btn[value].οnclick=function(){
				console.log(value);
			}
		})
	})
</script>

webnoob

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Js循环绑定事件处理

很多时候我们在开发过程需要for循环给元素组绑定js事件，但是直接敲的话，事件响应的效果只能和最后一个元素一样，如下面的错误代码： js闭包运用 1 2 3 var btn=document.getElementsByTagName('button'); for(var i=0;i<3;i++){ btn[i].onclick=function(){
复制链接

扫一扫

专栏目录