js刪除註冊的事件處理函式

admin發表於2017-03-23
JS事件函式

既然能夠註冊事件處理函式，當然也能夠刪除註冊的事件處理函式。

關於註冊事件函式這裡就不多介紹了，具體可以參閱javascript如何註冊事件處理函式一章節。 

一.刪除使用控制程式碼方式註冊的事件處理函式:

使用控制程式碼方式刪除事件處理函式方式非常的簡單，如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
  var obt=document.getElementById("bt");
  var oshow=document.getElementById("count");
  var odelete=document.getElementById("delete");
  var count=0;
  obt.onclick=function(){
    count=count+1;
    oshow.innerHTML=count;
  }
  odelete.onclick=function(){
    obt.onclick=null;
  }
}
</script>
</head>
<body>
<div id="count"></div>
<input type="button" id="bt" value="檢視效果"/>
<input type="button" id="delete" value="刪除事件處理函式"/>
</body>
</html>

以上程式碼使用obt.onclick=null就可以刪除註冊的事件處理函式。

二.刪除使用addEventListener()和attachEvent()註冊的事件處理函式:

addEventListener()函式和attachEvent()函式可以為指定元素註冊事件處理函式，第一個是符合w3c標準的，IE8以上和谷歌火狐等瀏覽器等標準瀏覽器支援，第二個是IE瀏覽器使用，用來相容IE8和IE8以下瀏覽器。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
var EventUtil={ 
  //註冊 
  addHandler:function(element, type, handler){ 
    if(element.addEventListener){ 
      element.addEventListener(type, handler, false); 
    } 
    else if (element.attachEvent){ 
      element.attachEvent("on" + type, handler); 
    } 
    else{ 
      element["on" + type] = handler; 
    } 
  }, 
  //移除註冊 
  removeHandler:function(element, type, handler){ 
    if(element.removeEventListener){ 
      element.removeEventListener(type, handler, false); 
    } 
    else if(element.detachEvent){ 
      element.detachEvent("on" + type, handler); 
    } 
    else{ 
      element["on" + type] = null; 
    } 
  }              
};
window.onload=function(){
  var obt=document.getElementById("bt");
  var oshow=document.getElementById("count");
  var odelete=document.getElementById("delete");
  var count=0;
   
  function done(){
    count=count+1;
    oshow.innerHTML=count;
  }
   
  EventUtil.addHandler(obt,"click",done);
  odelete.onclick=function(){
    EventUtil.removeHandler(obt,"click",done);
  }
}
</script>
</head>
<body>
<div id="count"></div>
<input type="button" id="bt" value="檢視效果"/>
<input type="button" id="delete" value="刪除事件處理函式"/>
</body>
</html>

以上程式碼實現了我們的要求，可以刪除使用addEventListener()函式和detachEvent()函式註冊的事件處理函式，上面的程式碼進行進行了一下封裝，非常的方便，使用的時候直接呼叫就可以了。

相關閱讀:

1.addEventListener()函式可以參閱javascript addEventListener()一章節。

2.attachEvent()函式可以參閱javascript attachEvent()一章節。

相關文章