javascript紧接上一张for循环的问题，我自己的理解
这类问题，通常都是在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>
javascript紧接上一张for循环的问题，我自己的理解的更多相关文章
- 深入理解JavaScript的闭包特性如何给循环中的对象添加事件
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
- 细说JavaScript对象(4)： for in 循环
如同 in 运算符一样,使用 for in 循环遍历对象属性时,也将往上遍历整个原型链. // Poisoning Object.prototype Object.prototype.bar = 1; ...
- 《你不知道的JavaScript（上）》笔记——let和const
笔记摘自:<你不知道的JavaScript(上)>第3章 函数作用域和块作用域 let 1.let 关键字可以将变量绑定到所在的任意作用域中 2.let 为其声明的变量隐式地劫持了所在的块 ...
- javascript异步上传压缩图片并立即显示图片
javascript异步上传压缩图片并立即显示图片<pre><!doctype html><html><head><meta charset=&q ...
- JQuery，JS图片操作（上一张，下一张，旋转，放大，缩小）
1.html代码:我是从数据库获取图片路径. <div id="divprint" align="center"> @{DataTable dt = ...
- JavaScript中让Html页面中循环播放文字
JavaScript中让Html页面中循环播放文字 <html> <head> <meta http-equiv="Content-Type" con ...
- 几款极好的 JavaScript 文件上传插件
文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...
- JavaScript返回上一页代码区别
JavaScript返回上一页代码区别: window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行刷新的话就是:win ...
- 完善ext.grid.panel中的查询功能(紧接上一篇)
今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...
随机推荐
- Python 类 --基础与要点
1:2.x与3.x区别: 2.x:老式类,都继承自object,继承机制为深度优先 3.x:新式类不需要写(object),继承机制为广度优先 2:类说明: 在定义类下用""&qu ...
- C#System.Net.Mail采用简单邮件传输协议发送邮件
引用: using System.Net.Mail; public class EmailHelper { public static bool SendEmail(string title, str ...
- SwfUpload及imgareaselect使用方法
1.导入文件 Swfupload相关文件 imgareaselect截取插件相关文件 2.前端html代码 添加一个截取图片的按钮,其他为swf所需的html. <body> <di ...
- oc 多线程UI更新
1.在子线程中是不能进行UI 更新的,而可以更新的结果只是一个幻像:因为子线程代码执行完毕了,又自动进入到了主线程,执行了子线程中的UI更新的函数栈,这中间的时间非常的短,就让大家误以为分线程可以更新 ...
- jQuery对下拉框、单选框、多选框的处理
下拉框: //得到下拉菜单的选中项的文本(注意中间有空格) var cc1 = $(".formc select[@name='country'] option[@selected]&quo ...
- 第四届CCF大数据学术会议征文通知
第四届CCF大数据学术会议征文通知 2016年10月,兰州 近几年,大数据是各界高度关注积极布局的热点方向.2015年8月,国务院发表<促进大数据发展行动纲要>,正式将大数据提升为国家战略 ...
- HTML&CSS基础学习笔记1.12—引入样式表
引入样式表 我么都知道HTML是网页内容的载体,CSS样式是表现,就像网页的外衣.如何让网页披上这层外衣呢? 这个时候就需要用<link>标签了,它起到将CSS样式链入页面的作用. < ...
- jQuery Mobile 网格
在列容器中,根据不同的列数,子元素可设置类 ui-block-a|b|c|d|e.这些列将依次并排浮动. 网格中的列是等宽的(总宽是 100%),无边框.背景.外边距或内边距. 例: 对于 ui-gr ...
- Android学习笔记--Menu菜单的使用
实现选项菜单.上下文菜单,以及菜单内部的子菜单. 视图效果: MainActivity 选项菜单 选项菜单的子菜单 上下文菜单(按住按钮或者EditText弹出) 注意:上下文菜单如何弹出?在注册该菜 ...
- SSH三者作用
Struts在项目中的作用 Struts 在项目主要起控制作用,只要用于web层(即视图层和控制层)Struts本身是使用典型的MVC结构实现的,项目中使用了struts之后就等于项目也是一个MVC结 ...