JavaScript为元素动态添加事件之（attachEvent||addEventListener）

      本文介绍如何在运行时为元素添加事件以及添加带参数引用。我们在此通过attachEvent以及addEventListener

来为指定元素动态添加事件。其中，IE浏览器以及使用IE内核的浏览器中使用方法（attachEvent）来为元素动态添加

处理事件。其他浏览器则使用（addEventListener）方法动态添加处理事件。

      以下是示例代码：

/*
*功能：返回ID为elid的元素
*参数：
*    elid：元素标识
*/
function $(elid){return typeof(elid)=="string"?document.getElementById(elid):elid;}

/*
*功能：为目标元素添加相应处理事件
*参数：
*      strElment：目标Element标识
*      oEvent:事件
*      ofunc:处理函数
*/
function $Event(strElment,oEvent,ofunc){
 //依据不同浏览器，使用不同方法。
 if(window.addEventListener)
  $(strElment).addEventListener(oEvent,ofunc,false);
 else
  $(strElment).attachEvent("on"+oEvent,ofunc);
}


var elID=new Array("tmtd$tmpmgt","nltd$nltmgt");
function InitMenu()
{
    for(i=0;i<elID.length;i++)
    {
        elst=elID[i].split("$");
        $Event(elst[0],"mouseover",shfunction(elst[1],true));
        $Event(elst[0],"mouseout",shfunction(elst[1],false));
        $Event(elst[1],"mouseover",shfunction(elst[1],true));
        $Event(elst[1],"mouseout",shfunction(elst[1],false));
    }
}


//使用闭包为事件处理函数传递参数
var shfunction=function(strEl,bshow)
{
    return function()
    {
        for(i=0;i<elID.length;i++)
        {
            elst=elID[i].split("$");
            $(elst[1]).className="hid";
        }    
        $(strEl).className=bshow?"show":"hid";
    }
}

以下是支持代码：

 1<table cellpadding="0" cellspacing="0" style="padding:0px; margin:0px;">
 2    <tr style="background-color:#CCC;padding:4px;">
 3        <td id="tmtd">模板管理</td>
 4        <td id="nltd">类别管理</td>
 5    </tr>
 6    <tr>
 7        <td>
 8            <ul class="hid" id="tmpmgt">
 9                <li><a href="tmpList">模板管理</a></li>
10                <li><a href="editTmp.">添加模板</a></li>
11            </ul>
12        </td>
13        <td>
14            <ul class="hid" id="nltmgt">
15                <li><a href="nlttypelist.">类别列表</a></li>
16                <li><a href="editnlttype.">添加类别</a></li>
17            </ul>
18        </td>
19    </tr>
20</table>