javascript浏览器兼容教程之事件处理


Posted in Javascript onJune 09, 2014

1. window.event

【分析说明】先看一段代码

function et()
{ 
alert(event);//IE: [object]
}

以上代码在IE运行的结果是[object],而在Firefox无法运行。

因为在IE中event作为window对象的一个属性可以直接使用,但是在Firefox中却使用了W3C的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口。

【兼容处理】添加对event判断,根据浏览器的不同来得到正确的event:

function et()
{ 
evt=evt?evt:(window.event?window.event:null);
//兼容IE和Firefox
alert(evt);
}

2. 键盘值的取得

【分析说明】IE和Firefox获取键盘值的方法不同,可以理解,Firefox下的event.which与IE下的event.keyCode相当。关于彼此不同,可参考《键盘事件中keyCode、which和charCode 的兼容性测试》

【兼容处理】
复制代码

function myKeyPress(evt){
//兼容IE和Firefox获得keyBoardEvent对象
evt = (evt) ? evt : ((window.event) ? window.event : "")
//兼容IE和Firefox获得keyBoardEvent对象的键值
var key = evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey && (key == 13 || key == 10)){


//同时按下了Ctrl和回车键
//do something;
}
}

3. 事件源的获取

【分析说明】在使用事件委托的时候,通过事件源获取来判断事件到底来自哪个元素,但是,在IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。

【兼容处理】

ele=function(evt){ //捕获当前事件作用的对象
evt=evt||window.event;
return

(obj=event.srcElement?event.srcElement:event.target;);
}

4. 事件监听

【分析说明】在事件监听处理方面,IE提供了attachEvent和detachEvent两个接口,而Firefox提供的是addEventListener和removeEventListener。

【兼容处理】最简单的兼容性处理就是封装这两套接口:

function addEvent(elem, eventName, handler) {
if (elem.attachEvent) {


elem.attachEvent("on" + eventName, function(){










handler.call(elem)});


//此处使用回调函数call(),让this指向elem

} else if (elem.addEventListener) {


elem.addEventListener(eventName, handler, false);

}
}
function removeEvent(elem, eventName, handler) {

if (elem.detachEvent) {


elem.detachEvent("on" + eventName, function(){










handler.call(elem)});


//此处使用回调函数call(),让this指向elem

} else if (elem.removeEventListener) {


elem.removeEventListener(eventName, handler, false);

}
}

需要特别注意,Firefox下,事件处理函数中的this指向被监听元素本身,而在IE下则不然,可使用回调函数call,让当前上下文指向监听的元素。

5. 鼠标位置

【分析说明】IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性。

【兼容处理】使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX。复杂点还要考虑绝对位置。

function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
alert("x:" + x + "," + "y:" + y);
}
Javascript 相关文章推荐
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
Javascript数组及类数组相关原理详解
Oct 29 Javascript
jQuery学习笔记之toArray()
Jun 09 #Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 #Javascript
jQuery简易图片放大特效示例代码
Jun 09 #Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 #Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 #Javascript
js利用prototype调用Array的slice方法示例
Jun 09 #Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 #Javascript
You might like
PHP多个版本的分析解释
2011/07/21 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
python实现将文本转换成语音的方法
2015/05/28 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
费用会计岗位职责
2014/01/01 职场文书
绿色环保口号
2014/06/12 职场文书
大学专科求职信
2014/07/02 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
股份转让协议书范本
2015/01/27 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby