JS给元素添加事件

给页面的某个元素添加某个事件是前端开发经常遇到的事, 这里就演示利用原始的 JS 动态给页面某个元素添加事件, 兼容MS IE 和 非MSIE 的浏览器情况:

1, JS给元素动态添加事件的通用函数

function attachEvt(evt,refEventName,refObjID,refFunctionName){  
//how use: attachEvt(event,'click','objID',functionName)   //函数名称不用引号
var e=evt||window.event;  //事件,待扩展用
var evtName=refEventName;//事件名称,如 click, mouseover等，注意没有on 
var oID=refObjID;//元素的ID号
var fn=refFunctionName;   //响应的函数名称,响应函数可以另外在外部定义
var brsName='ie';//默认为ie
var ua=navigator.userAgent.toLowerCase();
if(ua.indexOf("msie") >= 0) 
brsName='ie';
else
brsName='other';
/*
if(ua.indexOf("msie") != -1) brsName='ie';
if(ua.indexOf("gecko") != -1) brsName='gecko';
if(ua.indexOf("opera") != -1) brsName='opera';
*/
var obj=document.getElementById(oID);
if("ie"==brsName)  //IE
obj.attachEvent("on"+evtName,fn);
else  //not IE
obj.addEventListener(evtName,fn,false); //参数为（事件，调用的函数，是否冒泡） 
}

上面函数有些还可以省,仅仅保留作为参考,

2, 函数应用如下:

假设有如下响应函数

function funName01(){
var obj=document.getElementById("div01");
alert(obj.innerHTML);
}

<div id="div01" class="div01"> Div01 TEXT... 刚开始没有点击事件，当增加后该div有响应点击事件的函数</div>
<input name="btn01" value="add event[click]" type="button" onClick="javascript:attachEvt(event,'click','div01',funName01);">

关键的地方是:

MS IE 给元素添加事件使用 JS  函数: attachEvent(),  如: attachEvent("on"+事件名称,响应函数名)

非 MS IE 给元素添加事件使用 JS  函数: addEventListener(),  如: addEventListener(事件名称,响应函数名,false)