JS给元素添加事件

来源：互联网发布：工业用电量数据指标编辑：程序博客网时间：2024/04/29 20:02

给页面的某个元素添加某个事件是前端开发经常遇到的事, 这里就演示利用原始的 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';//默认为ievar ua=navigator.userAgent.toLowerCase();if(ua.indexOf("msie") >= 0) brsName='ie';elsebrsName='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)  //IEobj.attachEvent("on"+evtName,fn);else  //not IEobj.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)