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 KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
javascript 鼠标拖动图标技术
Feb 07 Javascript
jQuery选择头像并实时显示的代码
Jun 27 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
安装APACHE
2007/01/15 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
javascript动画效果类封装代码
2007/08/28 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
layui实现下拉框三级联动
2019/07/26 Javascript
python使用matplotlib画柱状图、散点图
2019/03/18 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
Python 自由定制表格的实现示例
2020/03/20 Python
零基础学python应该从哪里入手
2020/08/11 Python
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
小学生红领巾广播稿
2014/01/21 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
英语教师自荐信
2014/05/26 职场文书
IT工程师岗位职责
2014/07/04 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
详解python的内存分配机制
2021/05/10 Python
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python