JavaScript實(shí)現(xiàn)添加及刪除事件的方法小結(jié)
本文實(shí)例總結(jié)了JavaScript實(shí)現(xiàn)添加及刪除事件的方法。分享給大家供大家參考。具體如下:
JavaScript添加、刪除事件的方法,也就是讓某些方法生效指定次數(shù),可以是一次、兩次或更多次,但指定次數(shù)執(zhí)行完畢后就刪除該方法,使其失效,如果你經(jīng)常從事JS編程,你就會(huì)知道這種功能用得比較多。
先來看看一個(gè)比較簡單的例子:
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; //創(chuàng)建事件的通用函數(shù) var EventUtil = function(){}; var flag = new Flag(); //監(jiān)控變量值 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) { //如果是FF if(obj.addEventListener) { obj.addEventListener(EventType,Handler,false); } //如果是IE else if(obj.attachEvent) { obj.attachEvent('on'+EventType,Handler); } else { obj['on'+EventType] = Handler; } } //取消事件傳入的參數(shù)值要跟綁定時(shí)完全一樣才可以 EventUtil.removeEventHandler = function(obj,EventType,Handler) { //如果是FF if(obj.removeEventListener) { obj.removeEventListener(EventType,Handler,false); } //如果是IE else if(obj.detachEvent) { obj.detachEvent('on'+EventType,Handler); } else { obj['on'+EventType] = Handler; } } function setEvent1(e) { ev = e;//針對(duì)火狐獲取event相關(guān)屬性 flag.SetMethod('addList1()'); flag.SetValue (true); } function setEvent2(e) { ev = e;//針對(duì)火狐獲取event相關(guān)屬性 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 = "設(shè)置了事件,添加了 <b>" + oncount1 + "</b> 篇文章,左邊列表1自動(dòng)增加!"; } else { obj.innerHTML = "沒有設(shè)置事件,添加了 <b>" + oncount1 + "</b> 篇文章,左邊列表1沒有變化!"; } } function add2(obj) { oncount2 = oncount2 + 1; if(isSetEv2) { obj.innerHTML = "設(shè)置了事件,添加了 <b>" + oncount2 + "</b> 篇文章,左邊列表2自動(dòng)增加!"; } else { obj.innerHTML = "沒有設(shè)置事件,添加了 <b>" + oncount2 + "</b> 篇文章,左邊列表2沒有變化!"; } } function addList1() { count1 = count1 + 1; $("list1").innerHTML = "動(dòng)態(tài)添加了 <b>" + count1 + "</b> 篇文章了!"; } function addList2() { count2 = count2 + 1; $("list2").innerHTML = "動(dòng)態(tài)添加了 <b>" + count2 + "</b> 篇文章了!"; }
再來看看一個(gè)簡化的例子:
//通用的添加和刪除事件的方法(兼容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; } }
最后再來看一個(gè)完整的實(shí)例:
<!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>第一次點(diǎn)的時(shí)候彈出警告,并移除click事件,再點(diǎn)點(diǎn)擊就失效了</p> <div id="odiv" style="background:#003399; height:70px; width:126px; margin:0 auto; color:skyblue; ">第一次警告,第二次沒反應(yīng)!</div> </body> </html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
給easyui datebox擴(kuò)展一個(gè)清空的實(shí)例
下面小編就為大家?guī)硪黄oeasyui datebox擴(kuò)展一個(gè)清空按鈕的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11Bootstrap-table自定義可編輯每頁顯示記錄數(shù)
這篇文章主要介紹了Bootstrap-table自定義可編輯每頁顯示記錄數(shù)的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09JavaScript引用類型之基本包裝類型實(shí)例分析【Boolean、Number和String】
這篇文章主要介紹了JavaScript引用類型之基本包裝類型,結(jié)合實(shí)例形式分析了javascript中Boolean、Number和String三種基本包裝類型的基本用法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-08-08微信小程序?qū)崙?zhàn)之頂部導(dǎo)航欄(選項(xiàng)卡)(1)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)之頂部導(dǎo)航欄的相關(guān)代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04JavaScript轉(zhuǎn)換數(shù)據(jù)庫DateTime字段類型方法
下面小編就為大家?guī)硪黄狫avaScript轉(zhuǎn)換數(shù)據(jù)庫DateTime字段類型方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06javascript中的document.open()方法使用介紹
document.open()方法打開一個(gè)新的文檔并用document.write()方法編寫文檔的內(nèi)容,下面有個(gè)不錯(cuò)的示例,大家可以感受下2013-10-10