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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
javascript+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
javascript 原型继承介绍
Aug 30 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
js实现div色块碰撞
Jan 16 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
python类继承用法实例分析
2014/10/10 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python简单生成随机数的方法示例
2018/03/31 Python
pycham查看程序执行的时间方法
2018/11/29 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
幼儿园园长自我鉴定
2013/10/22 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
保护环境倡议书100字
2014/05/19 职场文书
法制宣传标语
2014/06/23 职场文书
党员志愿者活动总结
2014/06/26 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
MySQL 慢查询日志深入理解
2021/04/22 MySQL
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python