JavaScript為元素動態添加事件之（attachEvent||addEventListener）

      本文介紹如何在運行時為元素添加事件以及添加帶參數引用。我們在此通過attachEvent以及addEventListener

來為指定元素動態添加事件。其中，IE瀏覽器以及使用IE核心的瀏覽器中使用方法（attachEvent）來為元素動態添加

處理事件。其他瀏覽器則使用（addEventListener）方法動態添加處理事件。

      以下是範例程式碼：

Code
/*
*功能：返回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";
    }
}

以下是支援代碼：

Code
 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>