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

时间：2021-05-26

本文实例总结了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) {//非IE oTarget.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) {//非IE oTarget.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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章