JavaScript中的跨浏览器事件操作的基本方法整理


Posted in Javascript onMay 20, 2016

绑定事件

EU.addHandler = function(element,type,handler){
  //DOM2级事件处理,IE9也支持
  if(element.addEventListener){
    element.addEventListener(type,handler,false);
  }
  else if(element.attachEvent){
    //type加'on'
    //IE9也可以这样绑定
    element.attachEvent('on' + type,handler);
  }
  //DOM0级事件处理步,事件流也是冒泡
  else{
    element['on' + type] = handler;
  }
};

取消绑定事件
和绑定事件的处理基本一致,有一个注意点:
传入的handler必须与绑定事件时传入的相同(指向同一个函数)

EU.removeHandler = function(element,type,handler){
  if(element.removeEventListener){
    element.removeEventListener(type,handler);
  }
  else if(element.attachEvent){
    element.detachEvent('on' + type,handler);
  }
  else{
    //属性置空就可以
    element['on' + type] = null;
  }
};

跨浏览器添加事件

function addEvent(obj,type,fn){
    if(obj.addEventListener){
      obj.addEventListener(type,fn,false);
    }else if(obj.attachEvent){//IE
      obj.attchEvent('on'+type,fn);
    }
  }

   
跨浏览器移除事件

function removeEvent(obj,type,fn){
  if(obj.removeEventListener){
    obj.removeEventListener(type,fn,false);
  }else if(obj.detachEvent){//兼容IE
    obj.detachEvent('on'+type,fn);
  }
}

跨浏览器阻止默认行为

function preDef(ev){
    var e = ev || window.event;
    if(e.preventDefault){
      e.preventDefault();
    }else{
      e.returnValue =false;
    }
  }

   
跨浏览器获取目标对象

function getTarget(ev){
  if(ev.target){//w3c
    return ev.target;
  }else if(window.event.srcElement){//IE
    return window.event.srcElement;
  }
}

跨浏览器获取滚动条位置

//跨浏览器获取滚动条位置,sp == scroll position
  function getSP(){
    return{
      top: document.documentElement.scrollTop || document.body.scrollTop,
      left : document.documentElement.scrollLeft || document.body.scrollLeft;
    }
  }

跨浏览器获取可视窗口大小

function getWindow () {
      if(typeof window.innerWidth !='undefined') {
        return{
          width : window.innerWidth,
          height : window.innerHeight
        }

      } else{
        return {
          width : document.documentElement.clientWidth,
          height : document.documentElement.clientHeight
        }
      }
    },

       

Javascript 相关文章推荐
拥抱模块化的JavaScript
Mar 07 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
js判断IE浏览器版本过低示例代码
Nov 22 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
vue实现全选和反选功能
Aug 31 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 #Javascript
详解JavaScript中的事件流和事件处理程序
May 20 #Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 #Javascript
JavaScript中的Object对象学习教程
May 20 #Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 #Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 #Javascript
深入理解setTimeout函数和setInterval函数
May 20 #Javascript
You might like
PHP SPL使用方法和他的威力
2013/11/12 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
详解php用static方法的原因
2018/09/12 PHP
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
XENON基于JSON变种
2010/07/27 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
初学Python实用技巧两则
2014/08/29 Python
Python打包可执行文件的方法详解
2016/09/19 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
django做form表单的数据验证过程详解
2019/07/26 Python
python进阶之自定义可迭代的类
2019/08/20 Python
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
《海伦?凯勒》教学反思
2014/04/17 职场文书
应届生求职信
2014/05/31 职场文书
护士找工作求职信
2014/07/02 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
校园新闻稿范文
2015/07/18 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
修改并编译golang源码的操作步骤
2021/07/25 Golang
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL