这类问题，通常都是在for循环里，根据i的变化作为dom的下标来作当前dom的点击事件，
预期是，每个点击事件都对应相应的i下标，但是问题是，每次点击的都是最后一次节点的dom。
原因就是其实我们作点击事件的时候，for循环已经执行完毕了。
而且i如果没得到相应的保存，就只会为循环的最后一个值。
做了一共6中方法，大概分为两个范畴，
第一个是设置自定义属性，这个可以包括dom的自定义属性和函数的自定义属性；
第二个是利用闭包空间，来让i保存在闭包空间中的变量中；
上代码
html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> </head> <body> <form> <input type = "text" value ="1212"> <input type = "text" value ="1212"> <input type = "text" value ="1212"> <input type = "text" value ="1212"> <input type = "text" value ="1212"> </form> </body> </html>
javascript：
<script type="text/javascript">
var form = document.getElementsByTagName(‘form‘)[0];
var ipt = form.getElementsByTagName(‘input‘);
//自定义属性
for(var i = 0 ; i < ipt.length ;i++){
ipt[i].index = i ;
ipt[i].onclick = function(){
alert(this.index);
}
}
//下面很多方法都是通过闭包空间来解决的
//闭包就是内部函数的外部函数被其之外的变量调用时便产生了一个闭包空间
//闭包空间的变量不会被销毁，直到闭包空间的内部函数全部执行完毕
//要清楚，闭包空间作为外部函数一定要被调用，才会产生闭包，若外部函数（闭包空间）没被调用，内部函数就不会被调用
//闭包空间保存
for(var i = 0 ; i < ipt.length ; i++){
//以下自我执行函数为闭包空间
//形参arg保存实参i的值，直到循环结束
ipt[i].onclick = (function(arg){
return function(){
alert(arg);
}})(i);
}
//说到底都是闭包空间保存变量的作用，只要在内部函数外部顶一个函数
//因为内部函数依赖外部函数的变量（参数），所以如果内部函数没有执行完成，赖以生存的外部函数
//就不会被js的gc机制销毁，虽然作用链已断
for(var i = 0 ; i < ipt.length ;i++){
//以下为闭包空间
//arg保存i
//跟前面的方法差不多，都是传参完成，通过形参保存实参
function al(arg){
ipt[arg].onclick = function(){
alert(arg);
}
}
al(i)
}
//这种方法和arg传参才不多，只不过讲参数，作为闭包空间的内部参数存在
//另外其实参数和函数内部的变量差不多的存在
for(var i = 0 ; i< ipt.length ;i++){
//以下为闭包空间
//用temp保存i
ipt[i].onclick = (function (){
var temp = i;
return function(){
alert(temp)
}
})()
}
//函数自定义属性
//通过给每个函数都添加下标，在执行函数的时候，弹窗自己的下面
//arguments.callee表示当前执行最近的一个函数,用this表示会弹窗undifined
for(var i = 0 ; i< ipt.length ;i++){
(ipt[i].onclick = (function (){
alert(arguments.callee.i)
})).i = i;//这里声明的是函数的下标
}
//又是闭包空间
//有些眉目了么
for(var i = 0 ;i < ipt.length ;i++){
//以下为闭包空间，一定要记得，闭包空间的函数一定要执行
//通过temp来保存i，但是temp又被内部函数调用，所以temp不会马上被销毁
(function(){
var temp = i ;
ipt[i].onclick = function(){
alert(temp);
}
})()
}
</script>
时间： 2024-10-27 08:02:10