js 实现一些跨浏览器的事件方法详解及实例


Posted in Javascript onOctober 27, 2016

js实现一些跨浏览器的事件方法

用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象:

var EventUtil = {
  on: function(element, type, handler) {/* 添加事件 */
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {//IE 注意:此时事件处理程序会在全局作用域中运行,因此用attachEvent绑定的事件,此时在事件处理函数里的this 等于window,使用时要注意
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  },

  off: function(element, type, handler) {/* 移除事件 */
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  },

  getEvent: function(event) {/* 返回对event对象的引用 */
    return event ? event : window.event;
  },

  getTarget: function(event) {/* 返回事件的目标 */
    return event.target || event.srcElement;
  },

  preventDefault: function(event) { /* 取消事件的默认行为 */
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },

  stopPropagation: function(event) {/* 阻止事件冒泡 */
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
  },

  /* mouseover 和mouserout 这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内。*/
  getRelatedTarget: function(event) {
    if (event.relatedTarget) {
      return event.relatedTarget;
    } else if (event.toElement) {//IE8 mouserout事件
      return event.toElement;
    } else if (event.fromElement) {//IE8 mouseover事件
      return event.fromElement;
    } else {
      return null;//其他事件
    }
  }
};

调用如下:

EventUtil.on(document, "click", function(event){//为document元素绑定click事件
  event = EventUtil.getEvent(event);//获取event事件对象
  alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});

文章参考自《JavaScript高级程序设计第三版》

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
DOM事件探秘篇
Feb 15 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
Angular2 父子组件数据通信实例
Jun 22 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 #Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 #Javascript
简单理解vue中el、template、replace元素
Oct 27 #Javascript
深入理解JavaScript定时机制
Oct 27 #Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 #Javascript
js实现加载更多功能实例
Oct 27 #Javascript
Vue.js一个文件对应一个组件实践
Oct 27 #Javascript
You might like
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
sae使用smarty模板的方法
2013/12/17 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
js实现网页收藏功能
2015/12/17 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
自己使用总结Python程序代码片段
2015/06/02 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
Python 如何实现访问者模式
2020/07/28 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
Python脚本调试工具安装过程
2021/01/11 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
教师的实习自我鉴定
2013/12/17 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
作风建设年度心得体会
2014/10/29 职场文书
奖学金感谢信
2015/01/21 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书