找人解释一下这段js代码？很难理解？谢谢！

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>diao</title>
   <link rel="stylesheet" type="text/css" href="css/test.css" />
   <style type="text/css">
   *{margin:0;padding:0;}
   .clear{clear:both;height:0;overflow:hidden;}
   #menu span{float:left;width:60px;height:30px;cursor:pointer;text-align:center;border:1px green solid;}
   #menu .color{font-weight:bold;color:red;background:#666;}
   #cont div{width:320px;height:320px;display:none;}
   #cont .show{display:block;}
   .color1{background:red;}
   .color2{background:yellow;}
   .color3{background:blue;}
   .color4{background:green;}
   .color5{background:#000;}
   </style>
   <script language="javascript">
   function tabchange(){
   aa=document.getElementById("menu").getElementsByTagName("span")
   for (i=0;i<aa.length ;i++ ){
   addEventHandler(aa[i],"mouseover",function(){changecss(this);})
   }
   }
   function addEventHandler(oTarget,sEventType,fnHandler){
   if(oTarget.addEventListener){
   oTarget.addEventListener(sEventType,fnHandler,false)
   }else{oTarget["on"+sEventType]=fnHandler;}
   }
   function changecss(ospan){
   aa=document.getElementById("menu").getElementsByTagName("span")
   ss=document.getElementById("cont").getElementsByTagName("div")
   for (i=0;i<aa.length ;i++ ){
   aa[i].className="";
   if(aa[i]==ospan){
   aa[i].className="color";
   ss[i].className="show color"+(i+1);
   }else{ss[i].className="";}
   }
   }
   window.onload=function(){tabchange();}
   </script>
</head>
<body style="padding:100px;"><div id="menu">
<span class="color">红</span>
<span>黄</span>
<span>蓝</span>
<span>绿</span>
<span>黑</span>
</div>
<div class="clear">&nbsp;</div>
<div id="cont">
<div class="show color1">红</div>
<div>黄</div>
<div>蓝</div>
<div>绿</div>
<div>黑</div>
</div></body>
</html>
请问上面这段代码怎么理解啊？给点注释！

解决方案 »

  1.   

    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>diao</title>
      <link rel="stylesheet" type="text/css" href="css/test.css" />
      <style type="text/css">
      *{margin:0;padding:0;}
      .clear{clear:both;height:0;overflow:hidden;}
      #menu span{float:left;width:60px;height:30px;cursor:pointer;text-align:center;border:1px green solid;}
      #menu .color{font-weight:bold;color:red;background:#666;}
      #cont div{width:320px;height:320px;display:none;}
      #cont .show{display:block;}
      .color1{background:red;}
      .color2{background:yellow;}
      .color3{background:blue;}
      .color4{background:green;}
      .color5{background:#000;}
      </style>
      <script language="javascript">
      function tabchange(){
      //获取id为menu对象的所有的span标签对象，并将结果返回给（赋值给）变量aa
      aa=document.getElementById("menu").getElementsByTagName("span")
      for (i=0;i<aa.length ;i++ ){
      //循环执行给没给span对象绑定事件（mouseover--鼠标漂浮上去就会执行）
    addEventHandler(aa[i],"mouseover",function(){changecss(this);})
      }
      }
      function addEventHandler(oTarget,sEventType,fnHandler){//tabchange方法用到了这个方法，这个方法有三个参数
    //给对象oTarget绑定事件on+sEventType，并将这个事件与方法fnHandler结合（也就是让on+sEventTyhpe触发fnHandler方法）
      if(oTarget.addEventListener){//火狐（FF）下有效（这个方法（addEventListener）在ie不管用）
    oTarget.addEventListener(sEventType,fnHandler,false)
      }else{oTarget["on"+sEventType]=fnHandler;}//不是火狐(主要是ie)下有效
      }
      function changecss(ospan){//这个方法就是循环给menu中的对象设置css（样式）
      aa=document.getElementById("menu").getElementsByTagName("span")
      ss=document.getElementById("cont").getElementsByTagName("div")
      for (i=0;i<aa.length ;i++ ){
      aa[i].className="";
      if(aa[i]==ospan){
      aa[i].className="color";
      ss[i].className="show color"+(i+1);
      }else{ss[i].className="";}
      }
      }
      window.onload=function(){tabchange();}//在页面加载的时候就开始执行这个函数（主要是函数中的方法（还是函数）tabchage）
      </script>
    </head>
    <body style="padding:100px;"><div id="menu">
    <span class="color">红</span>
    <span>黄</span>
    <span>蓝</span>
    <span>绿</span>
    <span>黑</span>
    </div>
    <div class="clear">&nbsp;</div>
    <div id="cont">
    <div class="show color1">红</div>
    <div>黄</div>
    <div>蓝</div>
    <div>绿</div>
    <div>黑</div>
    </div></body>
    </html>
      

  2.   

    流程是所有页面元素加载完毕，调用window.onload->tabchange()->对页面所有的span标签的mouseover事件监听
    其效果就是当mouse在span上面的时候更改CSS样式，通过更改className来实现。
    oTarget.addEventListener(sEventType, fnHandler, false);
    这句是真正做监听的，oTarget需要监听的元素，sEventType监听的类型，这里是mouseover，fnHandler是事件触发所调用的函数，这里是function(){ changecss(this);}