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 xml为数据源的下拉框控件
Jul 07 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
javascript 精粹笔记
2010/05/09 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
利用JS实现数字增长
2016/07/28 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python随手笔记之标准类型内建函数
2015/12/02 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
Python下载网络小说实例代码
2018/02/03 Python
Python语言的变量认识及操作方法
2018/02/11 Python
Python实现word2Vec model过程解析
2019/12/16 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
名人演讲稿范文
2013/12/28 职场文书
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
数学教师个人总结
2015/02/06 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers