请问为什么把代码精简后运行达不到效果。

<!DOCTYPE html>
<html>
<head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">
        function bgcChange(obj){
            obj.onmouseover=function(){
                obj.style.backgroundColor="#f2f2f2";
            }
            obj.onmouseout=function(){
                obj.style.backgroundColor="#fff";
            }
        }
        window.onload = function(){//进入页面时,对已经有的td注册鼠标事件。
            // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
            var ttd=document.getElementsByTagName("td");
            for(var i=0;i<ttd.length;i++){//执行完所有循环后,给每一个td注册onmuseover和onmouseout事件;
                bgcChange(ttd[i]);
            }
        }
    </script>
    <style type="text/css">
        td{
            width: 30%;
            height: 20px;
        }
    </style>
</head>
<body>
<table border="1" width="50%" id="table">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>xh001</td>
        <td>王小明</td>
        <td><a href="javascript:;" onclick="del(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>
    <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:;" onclick="del(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>
</table>

</body>
</html>

 function bgcChange(obj){
           obj.onmouseover=function(){
               obj.style.backgroundColor="#f2f2f2";
           }
           obj.onmouseout=function(){
               obj.style.backgroundColor="#fff";
           }
       }
       window.onload = function(){
           var ttd=document.getElementsByTagName("td");
           for(var i=0;i<ttd.length;i++){
               bgcChange(ttd[i]);
           }
       }


其中上面的代码为什么不能简写成下面的:试过了,下面的代码运行达不到想要的效果。


 window.onload = function(){
           var ttd=document.getElementsByTagName("td");
           for(var i=0;i<ttd.length;i++){
                ttd[i].onmouseover=function(){
                        ttd[i].style.backgroundColor="#f2f2f2";
               }
               ttd[i].onmouseout=function(){
                        ttd[i].style.backgroundColor="#fff";
               }    

            }

  }           
       

weibo_和谐_汉子_0
浏览 1066回答 1
1回答

tom的猫

window.onload = function(){            var ttd=document.getElementsByTagName("td");            for(var i=0;i<ttd.length;i++){                 ttd[i].onmouseover=function(){                         this.style.backgroundColor="#f2f2f2";                }                ttd[i].onmouseout=function(){                         this.style.backgroundColor="#fff";                }                 } }因为js执行顺序是按照代码块来进行预处理和执行的,也就是说预处理的只是执行到的代码块的声明函数和变量,而对于还未加载的代码块,是没法进行预处理的,上面的代码中会先执行for循环的代码块,然后再执行鼠标事件的代码块。在执行鼠标事件的代码块时for循环已经走完了,此时 i== ttd.length,鼠标点击事件里的 ttd[i] 是拿不到的
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript