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 相关文章推荐
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
基于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
用PHP制作静态网站的模板框架(四)
2006/10/09 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
关于php开启错误提示的总结
2019/09/24 PHP
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
python批量创建指定名称的文件夹
2019/03/21 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
应届生.NET方向面试题
2015/05/23 面试题
银行出纳岗位职责
2013/11/25 职场文书
行政总经理岗位职责
2013/12/05 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫