您的位置：首页 > Web前端 > JavaScript

Js循环绑定事件处理

2016-06-15 17:05 483 查看

很多时候我们在开发过程需要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].onclick=function(){
console.log(i);
}
}
</script>

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

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

<script>
var btn=document.getElementsByTagName('button');
for(var i=0;i<3;i++){
(function(val){
btn[i].onclick=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].onclick=btnshow(i);
}

</script>

第三种可以利用jquert的$.each()
<script>
$(function(){
btn=document.getElementsByTagName('button');
$.each([0,1,2],function(index,value){
btn[value].onclick=function(){
console.log(value);
}
})
})
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航