JS闭包与事件处理-优快云博客

今写js时遇到一问题，要用内函数引用外函数的变量，我知道用函数闭包能解决这个问题，但没写成，故参考了些博客，并复制了此文章，用作参考。

我遇问题，并解决实现代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>五角星评级</title>
<style type="text/css">
#rating tr td{
cursor:pointer;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
inittable();
};
   function inittable(){
       var table=document.getElementById("rating");
       var tr=table.getElementsByTagName("tr");
       for(var i=0;i<tr.length;i++){
           var td=tr[i].getElementsByTagName("td");
           for(var j=0;j<td.length;j++){
           /*当我为每个单元格绑定一个事件函数时，该函数需要调用上面的for语句j变量，所以用函数闭包完美的解决了这个问题*/
               (function(j,td){
               td[j].οnclick=function(){
               for(var s=0;s<td.length;s++){
               td[s].innerHTML="☆";
               }
               for(var s=0;s<=j;s++){
               td[s].innerHTML="※";
               }
               }})(j,td)
           }
       }
   }
</script>
</head>
<body >
   <table id="rating">
   <tr>
       <td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
   </tr>
   <tr>
       <td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
   </tr>
   <tr>
       <td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
   </tr>
   </table>
</body>
</html>
实现图片如下

下面是转载的原文：

没有弹出框

          <script language=
          "javascript"
          type=
          "text/javascript"
          >
         

          function
          start(){
         

          var
          nid=document.getElementsByTagName(
          "li"
          );
         

          nid.onclick=
          function
          (){alert(
          "4"
          );}
         

          }
         

          window.onload=start;
         

          </script>
         

这样才有弹出对话框

          <script language=
          "javascript"
          type=
          "text/javascript"
          >
         

          function
          start(){
         

          var
          nid=document.getElementsByTagName(
          "li"
          );
         

          nid.onclick=(
          function
          (){alert(
          "4"
          );})()
         

          }
         

          window.onload=start;
         

          </script>
         

运行后，不论点击哪一个li，都是alert提示“4”。

这就是一个需要注意的地方：

闭包允许内层函数引用父函数中的变量，但是该变量是最终值。闭包引用的变量i，是循环结束后的值

          <script language=
          "javascript"
          type=
          "text/javascript"
          >
         

          var
          li=document.getElementsByTagName(
          "li"
          );
         

          for
          (
          var
          i=0;i<li.length;i++){
         

          li[i].onclick=
          function
          (){alert(i);}
         

          }
         

          </script>
         

用闭包来解决

注意顺序：先弹出“clicked” 再弹出“also clicked”

          <script>
         

          var
          fnClick1 =
          function
          (){ alert(
          "clicked"
          ); };
         

          var
          fnClick2 =
          function
          (){ alert(
          "also clicked"
          ); };
         

          var
          oDiv = document.getElementById(
          "div"
          );
         

          oDiv.attachEvent(
          "onclick"
          ,fnClick2);
         

          oDiv.attachEvent(
          "onclick"
          ,fnClick1);
         

          </script>
         

先弹出“also clicked” 再弹出“clicked”

          var
          oDiv = document.getElementById(
          "div"
          );
         

          oDiv.attachEvent(
          "onclick"
          ,fnClick1);
         

          oDiv.attachEvent(
          "onclick"
          ,fnClick2);
         