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 相关文章推荐
WEB 浏览器兼容 推荐收藏
May 14 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 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
2020最新CPU的性能排名
2020/04/02 数码科技
基于PHP CURL用法的深入分析
2013/06/09 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
初学JavaScript第二章
2008/09/30 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
使用JS实现动态时钟
2020/03/12 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
python和JavaScript哪个容易上手
2020/06/23 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
公司周年庆典邀请函
2014/01/12 职场文书
应届生求职信
2014/05/31 职场文书
校外活动方案
2014/08/28 职场文书
2015元旦标语横幅
2014/12/09 职场文书
导游词范文
2015/02/13 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
老乡会致辞
2015/07/28 职场文书
vue打包时去掉所有的console.log
2022/04/10 Vue.js
Oracle中日期的使用方法实例
2022/07/07 Oracle