javascript对兼容浏览器事件封装源码实例

当前位置：首页 > 代码实例 > html5 css3代码分类 > bootstrap > javascript对兼容浏览器事件封装源码实例

可能题目没有说清楚，这里所谓的对事件封装指的是实现兼容各个浏览器的事件处理函数的注册和删除效果。

之所以进行兼容处理，主要是因为低版本的IE浏览器存在兼容性问题，对w3c标准的事件处理方式不支持，但是当前用户又较多。

代码实例如下:

[ 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>

代码描述：javascript对兼容浏览器事件封装。javascript对兼容浏览器事件封装源码实例

下载全部收藏

128 171

用户评论

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