Javascript利用闭包(Closure)循环绑定事件

时间：2009年03月26日作者：愚人码头查看次数:2,038 views评论次数：0

我们先看一个关于Javascript利用循环绑定事件的例子：

例如：一个不确定长度的列表，在鼠标经过某一条的时候改变背景。

 

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  2. <html xmlns=“http://www.w3.org/1999/xhtml” >  
  3. <head>  
  4.     <title>Untitled Page</title>  
  5. </head>  
  6. <body>  
  7. <ul id=“list”>  
  8. <li>第1条记录</li>  
  9. <li>第2条记录</li>  
  10. <li>第3条记录</li>  
  11. <li>第4条记录</li>  
  12. <li>第5条记录</li>  
  13. <li>第6条记录</li>  
  14. </ul>  
  15. <script type=“text/javascript”>  
  16.     var list_obj = document.getElementById(“list”).getElementsByTagName(“li”); //获取list下面的所有li的对象数组   
  17.     for (var i = 0; i <= list_obj.length; i++) {   
  18.         list_obj[i].onmousemove = function() {   
  19.             this.style.backgroundColor = “#cdcdcd”;   
  20.         }   
  21.         list_obj[i].onmouseout = function() {   
  22.         this.style.backgroundColor = “#FFFFFF”;   
  23.         }   
  24.     }   
  25. </script>  
  26. </body>  
  27. </html>  

这个例子循环为一组对象绑定事件处理函数。

但是，如果我们在这个基础上增加一些需求。比如在点击某一条记录的时候弹出这是第几条记录？

肯能你会理所当然的这么写：

 

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  2. <html xmlns=“http://www.w3.org/1999/xhtml” >  
  3. <head>  
  4.     <title>Untitled Page</title>  
  5. </head>  
  6. <body>  
  7. <ul id=“list”>  
  8. <li>第1条记录</li>  
  9. <li>第2条记录</li>  
  10. <li>第3条记录</li>  
  11. <li>第4条记录</li>  
  12. <li>第5条记录</li>  
  13. <li>第6条记录</li>  
  14. </ul>  
  15. <script type=“text/javascript”>  
  16.     var list_obj = document.getElementById(“list”).getElementsByTagName(“li”); //获取list下面的所有li的对象数组   
  17.     for (var i = 0; i <= list_obj.length; i++) {   
  18.         list_obj[i].onmousemove = function() {   
  19.             this.style.backgroundColor = “#cdcdcd”;   
  20.         }   
  21.         list_obj[i].onmouseout = function() {   
  22.             this.style.backgroundColor = “#FFFFFF”;   
  23.         }   
  24.         list_obj[i].onclick = function() {   
  25.             alert(“这是第” + i + ”记录”);   
  26.         }   
  27.     }   
  28. </script>  
  29. </body>  
  30. </html>  

测试一下你会发现alert出来的都是：这是第6记录

其实这里for循环已将整个列表循环了一遍，并执行了i++，所以这里i变成了6，

有什么好的办法解决这个问题吗？

那就是闭包了，个人认为闭包是js中最难捉摸的地方之一，

看看什么是闭包:

闭包时是指内层的函数可以引用存在与包围他的函数内的变量，即使外层的函数的执行已经终止。

可以查阅：http://www.css88.com/article.asp?id=469

这个例子中我们可以这样做：

 

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  2. <html xmlns=“http://www.w3.org/1999/xhtml” >  
  3. <head>  
  4.     <title>Untitled Page</title>  
  5. </head>  
  6. <body>  
  7. <ul id=“list”>  
  8. <li>第1条记录</li>  
  9. <li>第2条记录</li>  
  10. <li>第3条记录</li>  
  11. <li>第4条记录</li>  
  12. <li>第5条记录</li>  
  13. <li>第6条记录</li>  
  14. </ul>  
  15. <script type=“text/javascript”>  
  16.     function tt(nob) {   
  17.         this.clickFunc = function() {   
  18.         alert(“这是第” + (nob + 1) + ”记录”);   
  19.         }   
  20.     }   
  21.     var list_obj = document.getElementById(“list”).getElementsByTagName(“li”); //获取list下面的所有li的对象数组   
  22.     for (var i = 0; i <= list_obj.length; i++) {   
  23.         list_obj[i].onmousemove = function() {   
  24.             this.style.backgroundColor = “#cdcdcd”;   
  25.         }   
  26.         list_obj[i].onmouseout = function() {   
  27.             this.style.backgroundColor = “#FFFFFF”;   
  28.         }   
  29.         var col = new tt(i);   
  30.         list_obj[i].onclick = col.clickFunc;   
  31.     }   
  32. </script>  
  33. </body>  
  34. </html>  

大家可以看看：Javascript循环绑定事件（续）http://www.css88.com/article.asp?id=535

PS：闭包很难，很复杂！

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《Javascript利用闭包(Closure)循环绑定事件》

如果你读了我的文章，觉得有帮助： 说明
分类：JS

您可能感兴趣的文章

0条评论

暂时没有评论！

发表评论

*

*