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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 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
php仿discuz分页效果代码
2008/10/02 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
浅析javascript 定时器
2014/12/23 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
你真的了解Python的random模块吗?
2017/12/12 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
毕业生的自我评价分享
2013/12/18 职场文书
财产公证书
2014/04/10 职场文书
临床医学专业求职信
2014/08/08 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
医院见习报告范文
2014/11/03 职场文书
财务工作个人总结
2015/02/27 职场文书
简爱电影观后感
2015/06/10 职场文书
高一作文之暖冬
2019/11/09 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库