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下过滤数组重复值的代码
Sep 10 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
用PHP生成html分页列表的代码
2007/03/18 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
VBScript版代码高亮
2006/06/26 Javascript
一个可以显示阴历的JS代码
2007/03/05 Javascript
javascript Base类 包含基本的方法
2009/07/22 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
详解django中自定义标签和过滤器
2017/07/03 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
在python里从协程返回一个值的示例
2019/02/19 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
武汉瑞得软件笔试题
2015/10/27 面试题
绝对经典成功的大学生推荐信
2013/11/08 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书