js跨浏览器的事件侦听器和事件对象的使用方法


Posted in Javascript onDecember 17, 2015

本文特意为跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法做了下总结,并把这些方法打包,欢迎大家学习。
打包的一个EventUtil对象

var EventUtil = {
    // 添加侦听事件
    addEventListener:function (element, type, handler) {
      // IE9+、Firefox、Safari、chrome和Opera
      if(element.addEventListener) {
        element.addEventListener(type, handler, false);
      }
      // IE8-
      else if(element.attachEvent) {
        element.attachEvent("on" + type, handler);
      }
    },
    
    // 移除侦听事件
    removeEventListener:function (element, type, handler) {
      // IE9+、Firefox、Safari、chrome和Opera
      if(element.addEventListener) {
        element.removeEventListener(type, handler, false);
      }
      // IE8-
      else if(element.attachEvent) {
        element.detachEvent("on" + type, handler);
      }
    },
    
    // 获取事件对象
    getEvent:function(event) {
      if(typeof event == "undefined") {
        event = window.event; // IE浏览器
      }
      return event;
    },
    
    // 获取触发事件的元素
    getTarget:function(event){
      if(typeof event.srcElement == "undefined") {
        return event.target;
      }else {
        return event.srcElement; // IE浏览器
      }
    },
    
    // 获取事件类型
    getType:function(event) {
      return event.type;
    },
    
    // 获取按键键码
    getCharCode:function(event) {
      if(typeof event.keyCode == "number") {
        return event.keyCode; // IE8-、Firefox和opera
      }else {
        return event.charCode; 
      }
    },
    
    // 获取鼠标相对于文档的位置,即页面坐标位置
    getPagePosition:function(event) {
      var pageX = event.pageX,
        pageY = event.pageY;
      if(pageX == undefined) {
        pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
      }
      if(pageY == undefined) {
        pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
      }
      return {
        pageX:pageX,
        pageY:pageY
      };
    },
    
    // 阻止事件的默认行为
    preventDefault:function(event) {
      if(event.preventDefault){
        event.preventDefault();
      }else {
        event.returnValue = false; // IE浏览器
      }
    },
    
    // 阻止事件冒泡
    stopPropagation:function(event) {
      if(typeof event.cancelBubble == "undefined") {
        event.stopPropagation();
      }else {
        event.cancelBubble = true; // IE浏览器
      }
    }
  };

测试代码

<div id="box" style="color:red;width: 100%;height:200px;" >
  <input type="button" value="点击" id="btn" />
</div>
<a href="http://www.test.com" id="a">test</a>
var box = document.querySelector("#box");
  box.onclick = function(event) {
    event = EventUtil.getEvent(event);
    alert(EventUtil.getType(event));
    alert(EventUtil.getTarget(event));
  };
  var input = document.querySelector("input");
  input.onclick = function(event) {
    event = EventUtil.getEvent(event);
    EventUtil.stopPropagation(event);
  };
  
  var a = document.getElementById("a");
  a.onclick = function(event) {
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
  };

以上就是跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JS上传前预览图片实例
Mar 25 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
javascript执行环境及作用域详解
May 05 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
小程序实现分类页
Jul 12 Javascript
js调出上下文菜单的实例
Dec 17 #Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 #Javascript
JSONObject使用方法详解
Dec 17 #Javascript
JS实现alert中显示换行的方法
Dec 17 #Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 #Javascript
jQuery实现进度条效果代码
Dec 17 #Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 #Javascript
You might like
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
京东国际站:JOYBUY
2017/11/23 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
简历的自我评价
2014/02/03 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
企业宣传工作方案
2014/06/02 职场文书
社区娱乐活动方案
2014/08/21 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
横店影视城导游词
2015/02/06 职场文书
运动会200米广播稿
2015/08/19 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书