找人解释一下这段js代码，谢谢？

Question

<script language="javascript">
function tabchange() {
var bf = document.getElementById("btn_father");
var ss = bf.getElementsByTagName("span");
for(var i=0;i<ss.length;i++){
addEventHandler(ss[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) { 
var bf = document.getElementById("btn_father");
var ss = bf.getElementsByTagName("span");
var df = document.getElementById("sp_father");
var ds = df.getElementsByTagName("div"); 
for(var i=0;i<ss.length;i++){
ss[i].className=" ";
if (ospan == ss[i]){
ds[i].className="show";
}else
{
ds[i].className="";
}
}
ospan.className="btn1";
}
window.onload = function () {
tabchange();
}
</script>
这段代码什么意思啊？

Answer 1

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

Answer 2

貌似是一个类似于tab选项卡的特效，做了注册事件，是兼容浏览器用的

Answer 3

所有页面元素加载完毕以后，设置SPAN的ＣＳＳ样式，通过mouseover事件实现，
从而调用changecss函数。
代码好像是形成这样一种效果：
在鼠标移动到Ｓｐａｎ上面的时候
动态改变SPAN的ＣＳＳ样式外观，隐藏相应的ＤＩＶ元素，
应该是Ｔａｂ选项卡的效果。

Answer 4

/*获得btn_father这个标签
  并且获得btn_father标签中所有的span标签以数组的形式返回；
  每个数组元素都是span标签，遍历数组为其鼠标悬停（mouseover）事件
  添加匿名（没有函数名）处理函数；
*/
function tabchange() 
{
    //获得btn_father这个标签;
    var bf = document.getElementById("btn_father");
    
    //获得btn_father标签中所有的span标签以数组(ss)的形式返回
    var ss = bf.getElementsByTagName("span");
    
    //遍历数组(每个span标签)
    for(var i=0;i<ss.length;i++)
    {
         //为其鼠标悬停（mouseover）事件,添加匿名（没有函数名）处理函数
        addEventHandler(ss[i],"mouseover",function(){ changecss(this);});
    }
}
//添加事件处理函数的方法
//oTarget:要添加事件处理函数的标签对象（如：span）
//sEventType:事件的类型（如：mouseover）
//fnHandler：事件的处理函数（如：function(){ changecss(this);}）
function addEventHandler(oTarget, sEventType, fnHandler) {//如果oTarget有addEventListener这样的一个属性
//当前浏览器支持标准的DOM事件处理函数添加模型（IE不支持标准）
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else {//否则，为IE支持的事件处理模型
oTarget["on" + sEventType] = fnHandler;}
}//改变标签的CSS
//ospan:标签对象（如：ospan）
function changecss(ospan) {    //获得btn_father这个标签;
var bf = document.getElementById("btn_father");//获得btn_father标签中所有的span标签以数组(ss)的形式返回
var ss = bf.getElementsByTagName("span"); //获得sp_fatherr这个标签;
var df = document.getElementById("sp_father");//获得btn_father标签中所有的div标签以数组(ds)的形式返回
var ds = df.getElementsByTagName("div");   //遍历数组(每个span标签)
for(var i=0;i<ss.length;i++)
{ss[i].className=" ";//如果遍历的当前元素（span标签）和传入的参数相同
//改变它（span）的css的name属性为：“show”
if (ospan == ss[i]){
ds[i].className="show";
}else
{
//否则，改变它（span）的css的name属性为空；
ds[i].className="";
}
}
//最后要为传入的标签（参数）改变其css为：“btn1”
ospan.className="btn1";
}//为window的onload添加处理匿名函数
/*也就是说在页面完全载入到内存了，所有的DOM（HTML标签）元素都
可以访问了；就执行上面的：tabchange()函数（tabchange()是最先执行的）；
*/
window.onload = function () {
tabchange();
}