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 相关文章推荐
在Javascript中定义对象类别
Dec 22 Javascript
初学JavaScript第二章
Sep 30 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
js实现登录验证码
Dec 22 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 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
与数据库连接
2006/10/09 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
关于读书的演讲稿
2014/05/07 职场文书
关于责任的演讲稿
2014/05/20 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
个人德育工作总结
2015/03/05 职场文书
2016年感恩节寄语
2015/12/07 职场文书