js给DOM添加事件是出现的异常情况，请高手指点

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<input id="test" type="button" ><body>
<script type="text/javascript">
function a(a1){
  alert("a : "+a1);
}
function b(b1){
  alert("b : "+b1);
}
var lis = [{name:"onclick",fun:a},{name:"onmouseover",fun:b}]
var bu = document.getElementById('test');for(var ins = 0;ins <lis.length;ins++){
  var evname = lis[ins].name;
  var fun = lis[ins].fun;
  bu[evname]=function(){
fun("ss"+ins);
    }
}
</script>
</body>
</html>问题描述：像这样添加事件 onclick和onmouseover都只调用了b函数，为什么会出现这种覆盖，有没有高手
遇到过同类的问题，请高手们指点指点

解决方案 »

  1.   

    <script type="text/javascript">
    function a(a1){
      alert("a : "+a1);
    }
    function b(b1){
      alert("b : "+b1);
    }
    var lis = [{name:"onclick",fun:a},{name:"onmouseover",fun:b}]
    var bu = document.getElementById('test');for(var ins = 0;ins <lis.length;ins++){
      (function(ins){
      var evname = lis[ins].name;
      var fun = lis[ins].fun;
      bu[evname]=function(){
                fun("ss"+ins);
        }
    })(ins)
    }
    </script>
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <input id="test" type="button" ><body>
    <script type="text/javascript">
     var addEvent = function(otarget, stype, fnhandler ){
    otarget.attachEvent ? otarget.attachEvent("on"+stype, fnhandler) : otarget.addEventListener(stype,fnhandler,false);
     };
    function a(a1){
      alert("a : "+a1);
    }
    function b(b1){
      alert("b : "+b1);
    }
    var lis = [{name:"click",fun:a},{name:"mouseover",fun:b}]
    var bu = document.getElementById('test');for(var ins = 0;ins <lis.length;ins++){
      var evname = lis[ins].name;
      var fun = lis[ins].fun;
      addEvent(bu,evname, function(ins){
    return function(){
     fun("ss"+ins);
    }  
      }(ins));}
    </script>
    </body>
    </html>
      

  3.   

    直接：for(var ins = 0;ins <lis.length;ins++){
      var evname = lis[ins].name;
      var fun = lis[ins].fun;
      bu[evname]=fun;
    }
      

  4.   

    for(var ins = 0;ins <lis.length;ins++){
      var evname = lis[ins].name;
      var fun = lis[ins].fun;
      bu[evname]=fun.apply(null,"ss"+ins);
    }
      

  5.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <input id="test" type="button" ><body>
    <script type="text/javascript">
    function a(a1){
      alert("a : "+a1);
    }
    function b(b1){
      alert("b : "+b1);
    }
    var lis = [{name:"onclick",fun:a},{name:"onmouseover",fun:b}]
    var bu = document.getElementById('test');for(var ins = 0;ins <lis.length;ins++){
      var evname = lis[ins].name;
      var fun = lis[ins].fun;
      bu[evname]=function(ins){
                return function(){fun("ss"+ins)};
        }(ins)
    }
    </script>
    </body>
    </html>