js 实现一些跨浏览器的事件方法详解及实例
更新时间:2016年10月27日 17:11:46 投稿:lqh
这篇文章主要介绍了js 实现一些跨浏览器的事件方法详解及实例的相关资料,需要的朋友可以参考下
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高级程序设计第三版》
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关文章
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionCharts绘制的2D双柱状图效果,结合实例形式分析了jQuery使用FusionCharts插件绘制2D双柱状图的具体步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-05-05jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
今天测试偶然发现jquery.bgiframe.js在IE9环境下提示错误,于是很是好奇,想办法知道究竟,于是搜索了一下,现在与大家分享希望可以帮助你们2013-01-01Jquery Easyui日历组件Calender使用详解(23)
这篇文章主要为大家详细介绍了Jquery Easyui日历组件Calender的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-12-12jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionCharts实现的Marimekko图效果,结合实例形式分析了jQuery使用FusionCharts插件结合xml数据绘制Marimekko图的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03jquery插件splitScren实现页面分屏切换模板特效
这篇文章主要介绍了jquery插件splitScren实现页面分屏切换模板特效的相关资料,需要的朋友可以参考下2015-06-06
最新评论