問題描述：爲多個元素動態添加onclick事件時，onclick事件方法體內的循環變量不會被保存，原因是for循環時 和 click事件被觸發時 是不同的兩個時間。 循環中產生的變量i 在click事件觸發時已經不存在了。所以要通過閉包或者添加額外屬性的形式把具體的值保存下來。
首先，循環變量未被保存的情況
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title> 循環變量爲被保存的情況 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
var test = function() {
var btns = document.getElementsByName('btn');
for(var i = 0; i < btns.length; i ++) {
var btn = btns[i];
btn.onclick = function(){
alert( "i: " + i); //點擊事件觸發時， i都是爲最大值6
};
}
}
</script>
</head>
<body onload="test();">
<input type="button" name="btn" id="btn" value="Test0"><br>
<input type="button" name="btn" id="btn" value="Test1"><br>
<input type="button" name="btn" id="btn" value="Test2"><br>
<input type="button" name="btn" id="btn" value="Test3"><br>
<input type="button" name="btn" id="btn" value="Test4"><br>
<input type="button" name="btn" id="btn" value="Test5"><br>
</body>
</html>
方法一. 通過閉包的方式保存循環變量i的值：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 通過閉包的方式保存循環變量i的值 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
var closure = function() { //closure閉包
var btns = document.getElementsByName('btn');
for(var i = 0; i < btns.length; i ++) {
(function(j){
var btn = btns[j];
btn.onclick = function(){
alert( " j: " + j);
};
})(i);
}
}
</script>
</head>
<body onload="closure();">
<input type="button" name="btn" id="btn" value="Test0"><br>
<input type="button" name="btn" id="btn" value="Test1"><br>
<input type="button" name="btn" id="btn" value="Test2"><br>
<input type="button" name="btn" id="btn" value="Test3"><br>
<input type="button" name="btn" id="btn" value="Test4"><br>
<input type="button" name="btn" id="btn" value="Test5"><br>
</body>
</html>
方法二. 通過添加額外屬性保存循環變量的值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 通過添加額外屬性保存循環變量的值 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
var test = function() {
var btns = document.getElementsByName('btn');
for(var i = 0; i < btns.length; i ++) {
var btn = btns[i];
btn.setAttribute("index", i);
btn.onclick = function(){
alert( " i: " + this.getAttribute('index'));
}
}
}
</script>
</head>
<body onload="test();">
<input type="button" name="btn" id="btn" value="Test0"><br>
<input type="button" name="btn" id="btn" value="Test1"><br>
<input type="button" name="btn" id="btn" value="Test2"><br>
<input type="button" name="btn" id="btn" value="Test3"><br>
<input type="button" name="btn" id="btn" value="Test4"><br>
<input type="button" name="btn" id="btn" value="Test5"><br>
</body>
</html>