javascript刪除註冊的事件處理函式簡單介紹

admin發表於2017-03-29
JavaScript事件函式

本章節將介紹一下如何刪除給元素註冊的事件處理函式。

在眾多的教程中，好像關於註冊事件處理函式的介紹比較多，而關於如何刪除事件處理函式的介紹比較少。

下面就通過程式碼例項介紹一下如何實現此功能。

程式碼例項:

程式碼例項一:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#antzone{
  width:200px;
  height:100px;
  background-color:green;
}
</style>
<script type="text/javascript">
function addEvent(elem, eventName, handler) {
  if (elem.attachEvent) {
　  elem.attachEvent("on" + eventName, function(){
　　  handler.call(elem)
    });
　　 //此處使用回撥函式call()，讓this指向elem
  } 
  else if (elem.addEventListener) {
　  elem.addEventListener(eventName, handler, false);
  }
}
function removeEvent(elem, eventName, handler) {
  if (elem.detachEvent) {
    elem.detachEvent("on" + eventName, function(){
      handler.call(elem)
    });
　　 //此處使用回撥函式call()，讓this指向elem
  } 
  else if (elem.removeEventListener) {
　  elem.removeEventListener(eventName, handler, false);
  }
}
window.onload=function(){
  var odiv=document.getElementById("antzone");
  var oadd=document.getElementById("add");
  var odel=document.getElementById("del");
  function handler(){
    this.style.backgroundColor="red";
  }
  oadd.onclick=function(){
    addEvent(odiv,"click",handler);
  }
  odel.onclick=function(){
    removeEvent(odiv,"click",handler);
  }
}
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="add" value="註冊事件處理函式"/>
<input type="button" id="del" value="刪除事件處理函式"/>
</body>
</html>

上面的程式碼演示了註冊和刪除事件處理函式的功能，具體不多介紹，具體可以參閱如下文章。

1.事件封裝可以參閱javascript實現的對相容各個瀏覽器事件事件封裝一章節。

2.刪除事件處理函式可以參閱removeEventListener()方法和detachEvent()方法一章節。

程式碼例項二:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#antzone{
  width:200px;
  height:100px;
  background-color:green;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var odiv=document.getElementById("antzone");
  var oadd=document.getElementById("add");
  var odel=document.getElementById("del");
 
  oadd.onclick=function(){
    odiv.style.backgroundColor="blue";
  }
  odel.onclick=function(){
    oadd.onclick=null;
  }
}
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="add" value="註冊事件處理函式"/>
<input type="button" id="del" value="刪除事件處理函式"/>
</body>
</html>

也可以通過簡單的方式將事件控制程式碼設定為null即可，當然那也可以使用第一種方式刪除。

但是通過attachEvent()或者addEventListener()註冊的事件處理函式不能夠使用ele.onclick=null這種方式刪除。

相關文章