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 ...
随机推荐
- Python-7 列表list
#1 创建列表.向列表中添加元素 1) 列表名称.append(*) 2) 列表名称.extend([*,*,...]) 3) 列表名称.insert(位置,*) member = ['小甲鱼','小 ...
- HTML元素事件
事件触发模型 简要说明 onclick 鼠标单击链接 ondbclick 鼠标双击链接 onmousedown 鼠标在链接的位置按下 onmmouseout 鼠标移出链接所在的位置 onmouseov ...
- 解决WAMP搭建PHP环境后后局域网其他机器无法访问的问题
刚安装wamp以后本地访问localhost或者127.0.0.1可以访问,但是如果局域网内其他电脑访问则出现403错误.从网上找了很多,各种说法都有了,却没几个好用的.解决问题方法如下: 1,首先确 ...
- Python学习二(生成器和八皇后算法)
看书看到迭代器和生成器了,一般的使用是没什么问题的,不过很多时候并不能用的很习惯 书中例举了经典的八皇后问题,作为一个程序员怎么能够放过做题的机会呢,于是乎先自己来一遍,于是有了下面这个ugly的代码 ...
- C++模板类继承的一个小技巧
先说一下background前段时间想实现一个Sqlite localstorage的功能,对应不同的Model 实体有不同的table, 每一次sql操作的函数签名中会有model实体中的struc ...
- Javascript数组函数库
其实平时用的比较多的应该是push和pop,不过还是都记下来,以便后面使用. shift :删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4 ...
- EUI List列表实现人物列表
一 Scroll+List ,拖动组件到exml. List不能写定高度,不然无法自动扩展. 二 新建List条目皮肤, ListItemSkin皮肤 名字Label的文本{data.name} ...
- Maven的包依赖冲突可引发java.lang.IncompatibleClassChangeError错误
新版API上线后,发现LOG文件没有正常输出.查看Tomcat的Log文件发现如下的错误信息 May , :: AM com.sun.xml.ws.server.sei.EndpointMethodH ...
- faster-rcnn(testing): ubuntu14.04+caffe+cuda7.5+cudnn5.1.3+opencv3.0+matlabR2014a环境搭建记录
python版本的faster-rcnn见我的另一篇博客: py-faster-rcnn(running the demo): ubuntu14.04+caffe+cuda7.5+cudnn5.1.3 ...
- linux系统PXE+Kickstart自动安装系统
一.PXEPXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持工作站通过网络从远端服 ...