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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
js打开新窗口方法整理
Feb 17 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
babel基本使用详解
Feb 17 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
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实现smarty模板无限极分类的方法
2015/12/07 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
javascript实现动态标签云
2015/10/16 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
朴素贝叶斯算法的python实现方法
2014/11/18 Python
TensorFlow实现创建分类器
2018/02/06 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
python获取Linux发行版名称
2019/08/30 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
django 取消csrf限制的实例
2020/03/13 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
出纳岗位职责范本
2013/12/01 职场文书
简历中个人自我评价范文
2013/12/26 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
迁户口计划生育证明
2014/10/19 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL