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 相关文章推荐
javascript引用对象的方法
Jan 11 Javascript
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
Javascript 面向对象 继承
May 13 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
webpack入门必知必会
Jan 16 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
vue实现日历备忘录功能
Sep 24 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
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
Memcache 在PHP中的使用技巧
2010/02/08 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
php无限极分类实现方法分析
2019/07/04 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
js实现动态改变字体大小代码
2014/01/02 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
Python实现二分法算法实例
2015/02/02 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
python 字典的打印实现
2019/09/26 Python
python实现tail -f 功能
2020/01/17 Python
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
优秀班干部事迹材料
2014/01/26 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
责任担保书范文
2014/05/21 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
写给父母的感谢信
2015/01/22 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技
Python中的 No Module named ***问题及解决
2022/07/23 Python