js事件处理程序跨浏览器解决方案


Posted in Javascript onMarch 27, 2016

本文实例为大家分享了js事件处理程序跨浏览器解决方案,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<input type="button" id="button1" value="按钮" />
</div>
<script type="text/javascript">

function show(){


alert("Hello world!");

}

//声明一个对象

var eventUtil={

//添加句柄


addHandler:function(element,type,handler){

//DOM2级事件处理判断


if(element.addEventListener){



element.addEventListener(type,handler,false);


}else if(element.attachEvent){//IE事件处理判断



element.attachEvent('on'+type,handler);


}else{//DOM0级事件判断



element['on'+type]=handler;


}

},

//删除句柄

removeHandler:function(element,type,handler){

//DOM2级事件处理判断

if(element.removeEventListener){


elememt.removeEventListener(type,handler,false);

}else if(element.detachEvent){//IE事件处理判断


element.detachEvent('on'+type,handler);

}else{//DOM0级事件判断


element['on'+type]=null;


}

}
}

eventUtil.addHandler(button3,'click',show);
</script>

</body>
</html>

再为大家分享js原生事件处理跨浏览器的代码:

//跨浏览器的事件处理器添加方式
var EventUtil = {
  addHandler : function(elem, type, handler){
    if(elem.addEventListener){
      elem.addEventListener(type, handler, false);
    }
    else if(elem.attachEvent){
      elem.attachEvent("on" + type, handler);//添加多个同一类型的handler时,IE方式的规则是最后添加的最先触发
    }
    else{
      if(typeof elem["on" + type] === 'function'){
        var oldHandler = elem["on" + type];
        elem["on" + type] = function(){
          oldHandler();
          handler();
        }
      }
      else{
        elem["on" + type] = handler;//支持添加多个事件处理器
      }
    }
  },

  getEvent : function(event){
    return event ? event : window.event;
  },

  getTarget : function(event){
    return event.target || event.srcElement;
  },

  preventDefault : function(event){
    if(event.preventDefault){
      event.preventDefault();
    }
    else{
      event.returnValue = false;
    }
  },

  removeHandler : function(elem, type, handler){
    if(elem.removeEventListener){
      elem.removeEventListener(type, handler, false);
    }
    else if(elem.detachEvent){
      elem.detachEvent("on" + type, handler);
    }
    else{
      elem["on" + type] = null;//不支持移除单一事件处理器,只能全部移除
    }
  },

  stopPropagation : function(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }
    else{
      event.cancelBubble = true;
    }
  },

  getRelatedTarget : function(event){
    if(event.relatedTarget){
      return event.relatedTarget;
    }
    else if(event.toElement && event.type == "mouseout"){
      return event.toElement;
    }
    else if(event.fromElement && event.type == "mouseover"){
      return event.fromElement;
    }
    else{
      return null;
    }
  },

  /*IE8点击左键和中键都是0;FF无法识别中键;Chrome正常*/
  getButton : function(event){//返回0,1,2 - 左,中,右
    if(document.implementation.hasFeature("MouseEvents", "2.0")){
      return event.button;
    }
    else{
      switch(event.button){
        case 0:case 1:case 3:case 5:case 7:
          return 0;
          break;
        case 2:case 6:
          return 2;
          break;
        case 4:
          return 1;
          break;
        default:
          break;
      }
    }
  },

  /*只能检测keypress事件,返回值等于将要显示的字符编码*/
  /*IE和Chrome只有能显示的字符键才触发,FF其它键也能触发,返回值为0*/
  getCharCode : function(event){
    if(typeof event.charCode == "number"){
      return event.charCode;
    }
    else{
      return event.keyCode;
    }
  }
};

以上就是本文的全部内容,希望对大家解决js事件处理程序跨浏览器有所帮助。

Javascript 相关文章推荐
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
vue项目中导入swiper插件的方法
Jan 30 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
基于javascript实现九九乘法表
Mar 27 #Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 #Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 #Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 #Javascript
jquery中validate与form插件提交的方式小结
Mar 26 #Javascript
javascript实现方法调用与方法触发小结
Mar 26 #Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 #Javascript
You might like
在IIS上安装PHP4.0正式版
2006/10/09 PHP
smarty模板数学运算示例
2016/12/11 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
javascript各种复制代码收集
2008/09/20 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
Python函数调用追踪实现代码
2020/11/27 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
总经理助理工作职责
2014/02/06 职场文书
学生评语大全
2014/04/18 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
教师节标语大全
2014/10/07 职场文书
安全温馨提示语大全
2015/07/14 职场文书
消防演习感想
2015/08/10 职场文书
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers