JavaScript实现添加及删除事件的方法小结

本文实例总结了JavaScript实现添加及删除事件的方法。分享给大家供大家参考。具体如下：
JavaScript添加、删除事件的方法，也就是让某些方法生效指定次数，可以是一次、两次或更多次，但指定次数执行完毕后就删除该方法，使其失效，如果你经常从事JS编程，你就会知道这种功能用得比较多。
先来看看一个比较简单的例子：

function $（id）{return document.getElementByIdx_x（id）;}var ev = null;var count1= 0;var count2= 0;var oncount1 = 0;var oncount2 = 0;var isSetEv1 = false;var isSetEv2 = false;//创建事件的通用函数var EventUtil = function（）{};var flag = new Flag（）;//监控变量值function Flag（）{var tempflag = false;var method = null;this.SetMethod = function（value）{method = value;} this.SetValue = function（value）{tempflag = value;if（tempflag == true && method）{eval_r（method）} }this.GetValue = function（）{return tempflag;}}EventUtil.addEventHandler = function（obj,EventType,Handler）{//如果是FFif（obj.addEventListener）{obj.addEventListener（EventType,Handler,false）;} //如果是IEelse if（obj.attachEvent）{obj.attachEvent（"on"+EventType,Handler）;} else{obj["on"+EventType] = Handler;}}//取消事件传入的参数值要跟绑定时完全一样才可以EventUtil.removeEventHandler = function（obj,EventType,Handler）{//如果是FFif（obj.removeEventListener）{obj.removeEventListener（EventType,Handler,false）;} //如果是IEelse if（obj.detachEvent）{obj.detachEvent（"on"+EventType,Handler）;} else{obj["on"+EventType] = Handler;}}function setEvent1（e）{ev = e;//针对火狐获取event相关属性 flag.SetMethod（"addList1（）"）;flag.SetValue （true）;}function setEvent2（e）{ev = e;//针对火狐获取event相关属性flag.SetMethod（"addList2（）"）;flag.SetValue （true）;}function isSetEvent1（state）{isSetEv1 = state;//ie下方法名不能和全局变量名相同}function isSetEvent2（state）{isSetEv2 = state;}function add1（obj）{oncount1 = oncount1 + 1;if（isSetEv1）{obj.innerHTML = "设置了事件，添加了 <b>" + oncount1 + "</b> 篇文章,左边列表1自动增加！";}else{obj.innerHTML = "没有设置事件，添加了 <b>" + oncount1 + "</b> 篇文章,左边列表1没有变化！";}}function add2（obj）{oncount2 = oncount2 + 1;if（isSetEv2）{obj.innerHTML = "设置了事件，添加了 <b>" + oncount2 + "</b> 篇文章,左边列表2自动增加！";}else{obj.innerHTML = "没有设置事件，添加了 <b>" + oncount2 + "</b> 篇文章,左边列表2没有变化！";}}function addList1（）{count1 = count1 + 1;$（"list1"）.innerHTML = "动态添加了 <b>" + count1 + "</b> 篇文章了！";}function addList2（）{count2 = count2 + 1;$（"list2"）.innerHTML = "动态添加了 <b>" + count2 + "</b> 篇文章了！";}

再来看看一个简化的例子：

//通用的添加和删除事件的方法（兼容IE和firefox）function AddEventHandler（oTarget, sEventType, fnHandler）{if （oTarget.addEventListener） {//非IEoTarget.addEventListener（sEventType, fnHandler, false）;}else if （oTarget.attachEvent） {//IE oTarget.attachEvent（"on" + sEventType, fnHandler）;}else { oTarget["on" + sEventType] = fnHandler;}}function RemoveEventHandler（oTarget, sEventType, fnHandler）{if （oTarget.removeEventListener） {//非IEoTarget.removeEventListener（sEventType, fnHandler, false）;}else if （oTarget.detachEvent） {//IE oTarget.detachEvent（"on" + sEventType, fnHandler）;}else { oTarget["on" + sEventType] = null;}}

最后再来看一个完整的实例：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript添加、删除事件的方法</title><script type="text/javascript">var EventUtil=new Object;EventUtil.addEvent=function（oTarget,sEventType,funName）{if（oTarget.addEventListener）{//for DOM; oTarget.addEventListener（sEventType,funName, false）; }else if（oTarget.attachEvent）{ oTarget.attachEvent（"on"+sEventType,funName）; }else{ oTarget["on"+sEventType]=funName; }};EventUtil.removeEvent=function（oTarget,sEventType,funName）{if（oTarget.removeEventListener）{//for DOM; oTarget.removeEventListener（sEventType,funName, false）; }else if（oTarget.detachEvent）{ oTarget.detachEvent（"on"+sEventType,funName）; }else{ oTarget["on"+sEventType]=null; }};function removeClick（）{ alert（"click"）; var oDiv=document.getElementById（"odiv"）; oDiv.style.cursor="auto"; EventUtil.removeEvent（oDiv,"click",removeClick）;}function addLoadEvent（func）{var oldonload=window.onload;if（typeof window.onload ！="function"）{window.onload=func;}else{window.onload=function（）{oldonload（）;func（）;}}}addLoadEvent（addClick）;function addClick（）{ var oDiv=document.getElementById（"odiv"）; oDiv.style.cursor="pointer"; EventUtil.addEvent（oDiv,"click",removeClick）;}</script></head><body><p>第一次点的时候弹出警告，并移除click事件,再点点击就失效了</p><div id="odiv" style="background:#003399; height:70px; width:126px; margin:0 auto; color:skyblue; ">第一次警告，第二次没反应！</div></body></html>

希望本文所述对大家的javascript程序设计有所帮助。