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)