实现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循环批量注册事件处理函数就介绍到这了。

回复

我来回复
  • 暂无回复内容