JavaScript實現添加及刪除事件的方法小結

JavaScript實現添加及刪除事件的方法小結_javascript技巧

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體總結了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;//針對Firefox擷取event相關屬性 flag.SetMethod('addList1()');flag.SetValue (true);}function setEvent2(e){ev = e;//針對Firefox擷取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程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More