js闭包基本应用演示循环添加事件 -

liang100100

浏览: 37229 次
性别:
来自: 苏州

最近访客更多访客>>

pch272215690

jw1314

王阳光

千絮泠泉

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (31)

社区版块

存档分类

js闭包基本应用演示循环添加事件

遇到一个问题，获取html元素集，想给他们循环添加事件，在点击的时候需要把外面的参数传进去，这样，每次取到的值都是最后一个。代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>闭包演示</title>
</head>
<script type="text/javascript">
function load(){
	var dates=["我是第一个","我是第二个","我是第三个","我是第四个","我是第五个"];
	for(var i=0;i<5;i++){
		var date=dates[i];
		var obj=document.getElementById("btn"+(i+1));
		obj.onclick=function(arg){
			alert(date);
		};
	}
	
}
</script>

<body onload="load()">
  <ul>  
    <li> <a href="javaScript:void(0);" id="btn1">测试1</a></li>
	<li> <a href="javaScript:void(0);" id="btn2">测试2</a></li>
	<li> <a href="javaScript:void(0);" id="btn3">测试3</a></li>
	<li> <a href="javaScript:void(0);" id="btn4">测试4</a></li>
	<li> <a href="javaScript:void(0);" id="btn5">测试5</a></li>
  </ul>
</body>
</html>

打印出来的值每次都是最后一个；后面搜索出很多方法，先整理保存下，留着用。
应用js闭包，把js方法修改如下：
1、加一层闭包，返回一个函数作为响应事件

function load(){
	var dates=["我是第一个","我是第二个","我是第三个","我是第四个","我是第五个"];
	for(var i=0;i<5;i++){
		var date=dates[i];
		var obj=document.getElementById("btn"+(i+1));
		obj.onclick=function(arg){
			return function(){
				alert(arg);
				//可以在这里写点击事件时所做的事
			};
		}(date);
	}
}

2、将变量 date 保存给在每个段落对象（a）上

function load(){ 
    var dates=["我是第一个","我是第二个","我是第三个","我是第四个","我是第五个"];
	for(var i=0;i<5;i++){
		var date=dates[i];
		var obj=document.getElementById("btn"+(i+1));
		obj.date=date;
		obj.onclick=function(){
			 alert(this.date);
		};
	}
}

3、将变量 date保存在匿名函数自身

function load(){ 
    var dates=["我是第一个","我是第二个","我是第三个","我是第四个","我是第五个"];
	for(var i=0;i<5;i++){
		var date=dates[i];
		var obj=document.getElementById("btn"+(i+1));
		(obj.onclick=function(){
			 alert(arguments.callee.date);
		}).date=date;
	}
}

4、加一层闭包，date以函数参数形式传递给内层函数

function load(){ 
    var dates=["我是第一个","我是第二个","我是第三个","我是第四个","我是第五个"];
	for(var i=0;i<5;i++){
		var date=dates[i];
		var obj=document.getElementById("btn"+(i+1));
		(function(arg){
       		obj.onclick = function() {
            alert(arg);
             };
        })(date);//调用时参数 
	}
}

5、加一层闭包，date以局部变量形式传递给内层函数

function load(){ 
    var dates=["我是第一个","我是第二个","我是第三个","我是第四个","我是第五个"];
	for(var i=0;i<5;i++){
		var date=dates[i];
		var obj=document.getElementById("btn"+(i+1));
		(function () {
		  var temp = date;//调用时局部变量
		  obj.onclick = function() {
			alert(temp);
		  }
		})();
	}
}

6、用Function实现，实际上每产生一个函数实例就会产生一个闭包

function load(){ 
    var dates=["我是第一个","我是第二个","我是第三个","我是第四个","我是第五个"];
	for(var i=0;i<5;i++){
		var date=dates[i];
		var obj=document.getElementById("btn"+(i+1));
		obj.onclick =new Function("alert('"+date+"');");//new一次就产生一个函数实例,注意此处date两边需要加上单引号，否则js会把date的值当做变量
	}
}

7、用Function实现，没有new

function load(){ 
    var dates=["我是第一个","我是第二个","我是第三个","我是第四个","我是第五个"];
	for(var i=0;i<5;i++){
		var date=dates[i];
		var obj=document.getElementById("btn"+(i+1));
		obj.onclick =Function("alert('"+date+"');");//new一次就产生一个函数实例,注意此处date两边需要加上单引号，否则js会把date的值当做变量
	}
}

分享到：