javascript删除注册事件处理函数简单介绍

当前位置：首页 > 代码实例 > html5 css3代码分类 > bootstrap > javascript删除注册事件处理函数简单介绍

本章节将介绍一下如何删除给元素注册的事件处理函数。

在众多的教程中，好像关于注册事件处理函数的介绍比较多，而关于如何删除事件处理函数的介绍比较少。

下面就通过代码实例介绍一下如何实现此功能。

代码实例:

代码实例一:

[ bootstrap ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</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()方法一章节。

代码实例二:

[ bootstrap ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</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>

代码描述：javascript删除注册事件处理函数。javascript删除注册事件处理函数简单介绍

下载全部收藏

127 170

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册