js绑定事件打印索引的方法整理

最新推荐文章于 2022-09-22 08:52:59 发布

原创最新推荐文章于 2022-09-22 08:52:59 发布 · 338 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML #ViewUI

W3C 专栏收录该内容

9 篇文章

订阅专栏

本文探讨了在DOM元素上绑定事件并记录元素索引的方法。通过五种不同方式实现：使用对象属性、闭包、自执行匿名函数及new Function声明函数等，比较了各种方法的优劣，帮助开发者选择最适合场景的技术方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很常见的问题，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>