javascript的自启动函数。
两段代码：
复制代码代码如下:
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
alert(i);
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + i);
}, 'false');
}
再看一面一段：
复制代码代码如下:
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
(function(index){
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + index);
}, 'false');
})(i);
}
HTML 代码如下：
复制代码代码如下:
<body>
<a href = "#">a</a> <a href = "http://www.jbxue.com">脚本学堂</a>
<a href = "#">a</a> <a href = "http://www.jbxue.com">脚本学堂</a>
<a href = "#">a</a> <a href = "http://www.jbxue.com">脚本学堂</a>
<a href = "#">a</a> <a href = "http://www.jbxue.com">脚本学堂</a>
<a href = "#">a</a> <a href = "http://www.jbxue.com">脚本学堂</a>
<a href = "#">a</a> <a href = "http://www.jbxue.com">脚本学堂</a>
<a href = "#">a</a> <a href = "http://www.jbxue.com">脚本学堂</a>
<a href = "http://www.jbxue.com">脚本学堂</a>
</body>
你可以想像下，前后两段 script代码的效果。
如果你能看出来效果的区别，那么恭喜你。至少我思考了很久，才明白里面的玄妙。
是的。你没有看错，这里的第一段代码，无论你点击哪一个链接，输出的都是 I am link # 8.
第二段代码，才是你真正想要的结果，那么为什么呢。
看下面的代码：
复制代码代码如下:
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
alert(i);
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + i);
//注意这里的回调函数只有的触发的时候才会启动
//一样，这里的i的值也一样在循环结束的时候也变化了
}, 'false');
//原因在于
//这里的elems[i] 虽然是引用的元素
//但是回调函数中的i 已经在循环结束后
//变成了8(如果 elems 的长度是 8 的话)
}
复制代码代码如下:
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
(function(index){
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + index);
}, 'false');
})(i);
//而这里的则不一样
//虽然循环结束后i 的值变成了8
//但是在封装在闭包内的index 确实一直被locked 住的
//一直保存在内存中。
//准确的说 应该是整个函数都lock在内存中.
}
这里可能需要一些javascript闭包的知识。
相关推荐
javascript自启动函数的问题探讨.docx
4.3.1传统的JavaScript事件处理函数 4.3.2 W3C事件模型 4.3.3 在JavaScript中实现灵活的事件模型 4.4 Ajax应用中的模型 4.4.1 使用JavaSctjpt为业务领域建模 4.4.2 与服务器交互 4.5 从模型生成视图 4.5.1 ...
（3）针对页面自适应问题，本文结合渐进增强以及拥抱流式布局的思想，同时研究利用了移动设备的视口特性，实现跨分辨率、跨设备的页面自适应。 （4）针对系统的功能实现问题，通过结合利用原生态框架与HTML5的跨平台...
详细而深入，对MongoDB的开发和管理方法进行了详细的讲解，也对MongoDB的工作机制进行了深入的探讨。注重实战，通过实际中的案例为读者讲解使用MongoDB时遇到的各种问题，并给出了解决方案。本书旨在帮助云计算初学...
详细而深入，对MongoDB的开发和管理方法进行了详细的讲解，也对MongoDB的工作机制进行了深入的探讨。注重实战，通过实际中的案例为读者讲解使用MongoDB时遇到的各种问题，并给出了解决方案。本书旨在帮助云计算初学...
第9章 自顶向下的运算符优先级 9.1. JavaScript 9.2. 符号表 9.3. 语素 9.4. 优先级 9.5. 表达式 9.6. 中置运算符 9.7. 前置操作符 9.8. 赋值运算符 9.9. 常数 9.10. Scope 9.11. 语句 9.12. 函数 9.13. 数组和对象...
相关内容还有很多，可以自己参考正则表达式的语法仔细研究一下 【3】正则表达式应用——删除每一行行尾的指定字符 因为这几个字符在行中也是出现的,所以肯定不能用简单的替换实现 比如 12345 1265345 2345 需要...
W3C组织正在研究一种名为RDF(Resource Description Framework)的metadata处理方法，可以自动交换信息，W3C宣称，使用RDF配合数字签名，将使网络中存在"真实可信"的电子商务。 六.显示 单独用XMl不能显示页面，...
相关内容还有很多，可以自己参考正则表达式的语法仔细研究一下 【3】正则表达式应用——删除每一行行尾的指定字符 因为这几个字符在行中也是出现的,所以肯定不能用简单的替换实现 比如 12345 1265345 2345 需要...
Brian W.Kernighan贝尔实验室计算科学研究中心高级研究人员，著名的计算机科学家。他参加了UNIX系统、C语言、AWK语言和许多其他系统的开发，同时出版了许多在计算机领域具有影响的著作，如《The C Proguamming ...
解决方法：打开机箱，把主板上的一节纽扣电池取出，换上一节新的既可，或是CMOS被放电了，从新进入CMOS设置时间保存并退出就可解决此问题。 Press F1 tocontinue ,DEL to enter SETUP 按F1可以继续启动，按DEL进入...
先到网上下载一个MDAC(要是2.7以上的版本才行)，然后安装，安装以后或许会重新启动一次。 然后再下载一个.NET FRAMEWORK SDK，安装以后会在控制面板里面的管理工具里面多两个东西，这个不用理睬他，我们要使用的...
由于我最近一直在花时间研究无线应用，其中涉及使用MiniZed和Ultra96v2在Zynq SoC FPGA的ARM处理器上运行的自定义Web服务器，因此我意识到如何轻松地利用FPGA作为解决方案来帮助餐馆在COVID期间适应。我再次转向值得...