JavaScript实现添加及删除事件的方法小结
本文实例总结了JavaScript实现添加及删除事件的方法。分享给大家供大家参考。具体如下:
JavaScript添加、删除事件的方法,也就是让某些方法生效指定次数,可以是一次、两次或更多次,但指定次数执行完毕后就删除该方法,使其失效,如果你经常从事JS编程,你就会知道这种功能用得比较多。
先来看看一个比较简单的例子:
function$(id) { returndocument.getElementByIdx_x(id); } varev=null; varcount1=0; varcount2=0; varoncount1=0; varoncount2=0; varisSetEv1=false; varisSetEv2=false; //创建事件的通用函数 varEventUtil=function(){}; varflag=newFlag(); //监控变量值 functionFlag() { vartempflag=false; varmethod=null; this.SetMethod=function(value) { method=value; } this.SetValue=function(value) { tempflag=value; if(tempflag==true&&method){eval_r(method)} } this.GetValue=function() { returntempflag; } } EventUtil.addEventHandler=function(obj,EventType,Handler) { //如果是FF if(obj.addEventListener) { obj.addEventListener(EventType,Handler,false); } //如果是IE elseif(obj.attachEvent) { obj.attachEvent('on'+EventType,Handler); } else { obj['on'+EventType]=Handler; } } //取消事件传入的参数值要跟绑定时完全一样才可以 EventUtil.removeEventHandler=function(obj,EventType,Handler) { //如果是FF if(obj.removeEventListener) { obj.removeEventListener(EventType,Handler,false); } //如果是IE elseif(obj.detachEvent) { obj.detachEvent('on'+EventType,Handler); } else { obj['on'+EventType]=Handler; } } functionsetEvent1(e) { ev=e;//针对火狐获取event相关属性 flag.SetMethod('addList1()'); flag.SetValue(true); } functionsetEvent2(e) { ev=e;//针对火狐获取event相关属性 flag.SetMethod('addList2()'); flag.SetValue(true); } functionisSetEvent1(state) { isSetEv1=state;//ie下方法名不能和全局变量名相同 } functionisSetEvent2(state) { isSetEv2=state; } functionadd1(obj) { oncount1=oncount1+1; if(isSetEv1) { obj.innerHTML="设置了事件,添加了<b>"+oncount1+"</b>篇文章,左边列表1自动增加!"; } else { obj.innerHTML="没有设置事件,添加了<b>"+oncount1+"</b>篇文章,左边列表1没有变化!"; } } functionadd2(obj) { oncount2=oncount2+1; if(isSetEv2) { obj.innerHTML="设置了事件,添加了<b>"+oncount2+"</b>篇文章,左边列表2自动增加!"; } else { obj.innerHTML="没有设置事件,添加了<b>"+oncount2+"</b>篇文章,左边列表2没有变化!"; } } functionaddList1() { count1=count1+1; $("list1").innerHTML="动态添加了<b>"+count1+"</b>篇文章了!"; } functionaddList2() { count2=count2+1; $("list2").innerHTML="动态添加了<b>"+count2+"</b>篇文章了!"; }
再来看看一个简化的例子:
//通用的添加和删除事件的方法(兼容IE和firefox) functionAddEventHandler(oTarget,sEventType,fnHandler){ if(oTarget.addEventListener){//非IE oTarget.addEventListener(sEventType,fnHandler,false); }elseif(oTarget.attachEvent){//IE oTarget.attachEvent('on'+sEventType,fnHandler); }else{ oTarget['on'+sEventType]=fnHandler; } } functionRemoveEventHandler(oTarget,sEventType,fnHandler){ if(oTarget.removeEventListener){//非IE oTarget.removeEventListener(sEventType,fnHandler,false); }elseif(oTarget.detachEvent){//IE oTarget.detachEvent('on'+sEventType,fnHandler); }else{ oTarget['on'+sEventType]=null; } }
最后再来看一个完整的实例:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>JavaScript添加、删除事件的方法</title> <scripttype="text/javascript"> varEventUtil=newObject; EventUtil.addEvent=function(oTarget,sEventType,funName){ if(oTarget.addEventListener){//forDOM; oTarget.addEventListener(sEventType,funName,false); }elseif(oTarget.attachEvent){ oTarget.attachEvent("on"+sEventType,funName); }else{ oTarget["on"+sEventType]=funName; } }; EventUtil.removeEvent=function(oTarget,sEventType,funName){ if(oTarget.removeEventListener){//forDOM; oTarget.removeEventListener(sEventType,funName,false); }elseif(oTarget.detachEvent){ oTarget.detachEvent("on"+sEventType,funName); }else{ oTarget["on"+sEventType]=null; } }; functionremoveClick(){ alert("click"); varoDiv=document.getElementById("odiv"); oDiv.style.cursor="auto"; EventUtil.removeEvent(oDiv,"click",removeClick); } functionaddLoadEvent(func){ varoldonload=window.onload; if(typeofwindow.onload!="function"){ window.onload=func; }else{ window.onload=function(){ oldonload(); func(); } } } addLoadEvent(addClick); functionaddClick(){ varoDiv=document.getElementById("odiv"); oDiv.style.cursor="pointer"; EventUtil.addEvent(oDiv,"click",removeClick); } </script> </head> <body> <p>第一次点的时候弹出警告,并移除click事件,再点点击就失效了</p> <divid="odiv"style="background:#003399;height:70px;width:126px;margin:0auto;color:skyblue;">第一次警告,第二次没反应!</div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。