很常见的问题，dom对象绑定事件打印索引。
<html >
<body>
<p>111</p>
<p>222</p>
<p>333</p>
<p>444</p>
<p>555</p>
</body>
</html>
<script type="text/javascript">
var p = document.getElementsByTagName("p");
var len = p.length;
function fn1(){
for(var i=0; i<len; i++){
p[i].setAttribute("x",i+1);
p[i].onclick = function(){
alert(this.getAttribute("x"));
};
}
}
//fn1();
function fn2(){
for(var i=0; i<len; i++){
p[i].onclick = function(){
alert(arguments.callee.x);
}
p[i].onclick.x = i+1;
//or
/*
(p[i].onclick = function(){
alert(arguments.call.x);
}).x = i+1;
*/
}
}
//fn2();
// ----------------- 以上是保存变量在对象中。
function fn3(){
for(var i=0; i<len; i++){
p[i].onclick = (function(x){
var y = i+1;
return function(){ //返回一个闭包，引用了来自外层的变量
alert(x); // 参数形式
alert(y); // 变量形式,外层函数执行可以不带参数.
};
})(i+1);
}
}
//fn3();
function fn4(){
for(var i=0; i<len; i++){
(function(x){ //利用自执行的匿名函数激发作用域。体会和fn3的区别。
var y = i+1; //fn3和fn4同样是闭包，不过fn3是在函数外引用闭包，fn4是在函数内引用闭包。
p[i].onclick = function(){
alert(x);
alert(y);
}
})(i+1);
}
}
//fn4();
// ----------------------以上变量保存在闭包中
function fn5(){
for(var i=0; i<len; i++){
var str = "alert("+(i+1)+")"; //利用new Function声明函数。
p[i].onclick = new Function(str); //这种方法相当于对每一个p[i]单独声明了一个构造好的函数.
}
}
fn5();
//总结
/*
fn5的效率无疑是最差的，因为new Function的问题，所以不建议使用。
fn3,fn4利用闭包的特性，分别在内存中持久了每一个i的变量。这里可以帮助理解闭包的作用。
fn1,fn2将变量保存在对象上，效率最高，对于大量的绑定建议使用。
*/
</script>
分享到：
相关推荐
对象绑定事件 document.all.xxx.detachEvent("onclick",a); 插件数目 navigator.plugins 取变量类型 typeof($js_libpath) == "undefined" 下拉框 下拉框.options[索引] 下拉框.options.length 查找对象 ...
- **客户端事件处理**：当事件绑定的是客户端脚本（例如JavaScript）时，这些事件会在客户端（即用户的浏览器中）被处理。这种方式适合于快速响应用户交互、提高用户体验的情况。 - **服务器端事件处理**：对于绑定...
flex3的cookbook书籍完整版dpf（包含目录）,目录是我花了两个多小时自己整理的，希望对大家有帮助。 目录： 第一章.Flex与ActionScript基础(3) 1.1节.用FlexBuilder创建Flex项目 1.2节.用FlexBuilder创建Flex库项目 ...
- **数据处理**：在计算机的各种应用领域中，数据处理是最广泛的应用之一，包括数据录入、整理、分析等。 ### 计算机运行的基本思想 - **存储程序与程序控制**：这是计算机工作的基本原理，它使得计算机可以根据...