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高级程序设计第三版》
js实现一些跨浏览器的事件方法的更多相关文章
- js 跨浏览器实现事件
我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法: 1,dom0处理事件的方法,以前的js处理事件都是这样写的. (function () { var p=document.getE ...
- 跨浏览器的事件对象-------EventUtil 中的方法及用法
什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即 ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- JavaScript跨浏览器绑定事件函数的优化
JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要 ...
- Javascript跨浏览器的事件对象
一.跨浏览器的事件对象 var EventUtil = { ///添加事件 addHandler: function (element, type, handler) { if (element.ad ...
- EventUtil——跨浏览器的事件对象
. 首页 博客园 联系我 前言:什么是EventUtil?. EventUtil对象全见. addHandler方法. removeHandler方法. event对象与getEvent方法. tar ...
- 原生js 实现 Ajax 跨浏览器使用
js 实现 Ajax 跨浏览器使用 var CommonUtils = {}; (function(CommonUtils){ //---- Ajax module ---- CommonUtils. ...
- js在控件原有的事件方法中加入自己的方法
有没有碰到过这样的情况,在一个别人的页面上,你想为某个按钮加入自己的控制逻辑,满足条件的情况下才执行原有的事件方法呢? 这个时候在不能修改其原有方法的情况下,先获取控件的事件方法,并将其包装到自己的控 ...
- javaScript之跨浏览器的事件对象
跨浏览器的兼容代码 var eventHandler = { addHandler: function(element, type, handler){}, removeHandler: functi ...
随机推荐
- Oracle中将查询出的多条记录的某个字段拼接成一个字符串的方法
11g里面用listagg: select listagg(name,',') within (order by id) from table 10g里面用wm_concat:select wm_co ...
- JSTL函数标签库 fn标签
JSTL函数标签库 fn标签 在使用jstl的函数标签库之前需要在页面中引入: <%@ taglib prefix="fn" uri="http://java.su ...
- Xcode7打包,iOS9真机闪退,如何解决?
问:有些项目用xcode7打开运行,打包安装到iOS9设备上程序会闪退. 如果用xcode7以下编译,然后打包到iOS9的设备上就是正常的.这是为什么,关键是,怎么解决? 答:iOS9发布之后,有些a ...
- linux 进程的创建
1. 进程号: 每个进程在被初始化的时候,系统都会为其分配一个唯一标识的进程id,称为进程号: 进程号的类型为pid_t,通过getpid()和getppid()可以获取当前进程号和当前进程的父进程的 ...
- pkg-config
可以使用pkg-config获取的库需要有一个条件,那就是要求库的提供者,提供一个.pc文件.比如gtk+-2.0的pc文件内容如下: prefix=/usrexec_prefix=/usrlibdi ...
- python3网络爬虫笔记
参考资料 Python官方文档 知乎相关资料(1) 这篇非常好, 通俗易懂的总览整个Python学习框架. 知乎相关资料(2) 代码实现(一): 用Python抓取指定页面 #!/usr/bin/en ...
- 答:SQLServer DBA 三十问之五:有关视图索引
5. 视图上我们能建索引吗,如果能建的话,会啥好处和坏处:视图上建索引和表上建索引有啥区别: ----------------------------------------------------- ...
- Only MySqlParameter objects may be stored
Only MySqlParameter objects may be stored 今天碰到了这个问题琢磨了半天,最后发现是MySql.Data.dll版本问题,换了个最新版本的就可以了.
- VS有效序列号
VS2005 : KYTYH-TQKW6-VWPBQ-DKC8F-HWC4J VS2008 : PYHYP-WXB3B-B2CCM-V9DX9-VDY8T VS2010 : YCFHQ-9DWCY-D ...
- 最近学习linux命令的一个总结
最近学习了unix power tools,一方面是想增加对unix系统的了解:另一方面也是想增进使用效率,因为unix一大特色就是内置工具的丰富性.有了这些工具,可以方便的查看系统信息,查找需要的文 ...