实现for循环批量注册事件处理函数
分类：实例代码
for循环批量注册事件处理函数属于前端实例代码，有关更多实例代码大家可以查看。
如果需要注册事件处理函数的元素数量过多，一个一个的注册将会是一件非常庞大的任务。
批量注册将会极大的减少工作量，下面通过实例代码介绍一下如何利用for语句实现。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
window.onload=function(){
var obox=document.getElementById("box");
var lis=obox.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].onclick = function () { alert(this.index) }
}
}
</script>
</head>
<body>
<ul id="box">
<li>前端教程网一</li>
<li>前端教程网二</li>
<li>前端教程网三</li>
<li>前端教程网四</li>
</ul>
</body>
</html>
使用for为每个li元素注册click事件处理函数，当点击li元素的时候，弹出当前li元素索引值，特别注意的是，之所以将变量i赋值给自定义的属性index，而不是直接alert(i)，是因为，for循环执行完毕之后，i的值就变成了li元素的数量，li[ i ]也就会报错。
使用闭包的方式实现此功能，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
window.onload=function()
{
var obox=document.getElementById("box");
var lis=obox.getElementsByTagName("li");
for(var i=0;i<lis.length;i++)
{
lis[i].onclick=(function(i){
return function(){alert(i)}
})(i)
}
}
</script>
</head>
<body>
<ul id="box">
<li>前端教程网一</li>
<li>前端教程网二</li>
<li>前端教程网三</li>
<li>前端教程网四</li>
</ul>
</body>
</html>
以上代码实现了同样的功能，这里就不多介绍了，可以参阅相关阅读。
相关阅读:
（1）.getElementsByTagName()参阅document.getElementsByTagName()一章节。
（2）.闭包可以参阅JavaScript 闭包一章节。
for循环批量注册事件处理函数，这样的场景在实际项目中还是用的比较多的，关于for循环批量注册事件处理函数就介绍到这了。