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 ...
随机推荐
- Nginx 502错误触发条件与解决办法汇总(转载)
一些运行在Nginx上的网站有时候会出现“502 Bad Gateway”错误,有些时候甚至频繁的出现.有些站长是在刚刚转移到Nginx之后就出现了这个问题,所以经常会怀疑这是不是Nginx的问题,但 ...
- autoit 将输入法修改为英文输入法
如果能用ControlSend,就不推荐用send,如果非要用send,可以切换输入法为英文再send. $hWnd = WinGetHandle("[ACTIVE]");$hWn ...
- 安装Office 2010后出现正在配置
OFFICE 2010 MSDN版出来后,下载安装 ,启动后发现每次打开都会出现“正在配置”的进度,删除重装亦不成功,对SETUP.EXE改名也不行,最后找到这个方法,成功,备忘: 运行以下内容: r ...
- 安装完Pydev却无法创建Python工程
为了方便以后工作,今天在ADT里面安装了Pydev(http://pydev.org/updates),可是安装完之后,新建项目的时候却找不到Pydev,perference中也没有. 紧接着尝试安装 ...
- webstorm编辑RN代码提示功能
需要下载一个文件. 1. 进入你想存储这个文件的目录,按住shift+鼠标右键,选择“在此处打开命令窗口” 2. 在命令窗口中输入 git clone https://github.com/virt ...
- MySQL按照汉字的拼音排序
按照汉字的拼音排序,用的比较多是在人名的排序中,按照姓氏的拼音字母,从A到Z排序: 如果存储姓名的字段采用的是GBK字符集,那就好办了,因为GBK内码编码时本身就采用了拼音排序的方法(常用一级汉字37 ...
- The source attachment does not contain the source for the file ActionSupport.class 错误
报错 Syntax error, insert ";" to complete FieldDeclaration 报错 The source attachment does ...
- linux系统下的软连接与硬链接
前几天在linux系统下安装mongoDB,然后运行脚本导入数据的时候遇到了链接库查询不到的情况,如图 1所示.当时是通过创建软连接的方式解决的这个问题.虽然,通过网上的教程解决了这个问题,但是对于软 ...
- 关于移动端常用的盒模型与flex布局
在移动端选择布局的方式中常用盒模型display:-webkit-box达到自适应,然而display:-webkit-flex也同样能达到效果,因自在己移动端用-webkit-box比felx方式熟 ...
- git乱码问题解决
etc\gitconfig文件中增加以下内容: [gui] encoding = utf-8 [i18n] commitencoding = gbk [svn] pathnam ...