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 相关文章推荐
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
很让人受教的 提高php代码质量36计
2012/09/05 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
python数据挖掘需要学的内容
2019/06/23 Python
印度在线杂货店:bigbasket
2018/08/23 全球购物
30岁生日感言
2014/01/25 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
大学生就业自荐书
2014/06/16 职场文书
生活小常识广播稿
2014/09/16 职场文书
悬空寺导游词
2015/02/05 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers