firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码


Posted in Javascript onApril 12, 2007

在ie中,事件对象是作为一个全局变量来保存和维护的。 所有的浏览器事件,不管是用户触发的,还是其他事件, 都会更新window.event 对象。 所以在代码中,只要轻松调用 window.event 就可以轻松获取 事件对象, 再 event.srcElement 就可以取得触发事件的元素进行进一步处理在ff中, 事件对象却不是全局对象,一般情况下,是现场发生,现场使用,ff把事件对象自动传递给对应的事件处理函数。 在代码中,函数的第一个参数就是ff下的事件对象了。
以上是我个人对两个浏览器下的事件处理方法的粗浅理解,可能说得不是很明白,我写些代码来
详细说明一下

<button id="btn1">按钮1</button> 
<button id="btn2">按钮2</button> 
<button id="btn3">按钮3</button> 
<script> 
window.onload=function(){ 
document.getElementById("btn1").onclick=foo1 
document.getElementById("btn2").onclick=foo2 
document.getElementById("btn3").onclick=foo3 
} 
function foo1(){ 
//ie中, window.event使全局对象 
alert(window.event) // ie下,显示 "[object]" , ff下显示 "undefined" 
//ff中, 第一个参数自动从为 事件对象 
alert(arguments[0]) // ie下,显示 "undefined", ff下显示 "[object]" 
} 
function foo2(e){ 
alert(window.event) // ie下,显示 "[object]" , ff下显示 "undefined" 
//注意,我从来没有给 foo2传过参数哦。 现在 ff自动传参数给 foo2, 传的参数e 就是事件对象了 
alert(e) // ie下,显示 "undefined", ff下显示 "[object]" 
} 
function foo3(){ //同时兼容ie和ff的写法,取事件对象 
alert(arguments[0] || window.event) // ie 和 ff下,都显示 "[object]" 
var evt=arguments[0] || window.event 
var element=evt.srcElement || evt.target //在 ie和ff下 取得 btn3对象 
alert(element.id) // btn3 
} 
</script>

看到这里,我们似乎对 ie和ff的事件处理方式都已经理解了,并找到了解决的办法。
但是。。。。事情还没有结束。
看代码
<button id="btn" onclick="foo()">按钮1</button> 
<script> 
function foo(){ 
alert(arguments[0] || window.event) 
} 
</script>

很不幸,我们 foo给我们的结果是 undefined, 而不是期望的 object
原因在于 事件绑定的方式
onclick="foo()" 就是直接执行了, foo() 函数,没有任何参数的,
这种情况下 firefox没有机会传递任何参数给foo
而 btn.onclick=foo 这种情况, 因为不是直接执行函数,firefox才有机会传参数给foo
解决方法:
方法一:比较笨的方法,既然 firefox没有机会传参数,那么自己勤快点,自己传
<button id="btn" onclick="foo(event)">按钮</button> 
<script> 
function foo(){ 
alert(arguments[0] || window.event) 
var evt=arguments[0] || window.event 
var element=evt.srcElement || evt.target 
alert(element.id) 
} 
</script>

方法二: 自动查找
<button id="btn4" onclick="foo4()">按钮4</button> 
<script> 
function foo4(){ 
var evt=getEvent() 
var element=evt.srcElement || evt.target 
alert(element.id) 
} 
function getEvent(){ //同时兼容ie和ff的写法 
if(document.all) return window.event; 
func=getEvent.caller; 
while(func!=null){ 
var arg0=func.arguments[0]; 
if(arg0){ 
if((arg0.constructor==Event || arg0.constructor ==MouseEvent) 
|| (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){ 
return arg0; 
} 
} 
func=func.caller; 
} 
return null; 
} 
</script>

方法二由 lostinet原创,我在其基础上有所改进, 原函数如下
function SearchEvent() 
{ 
//IE 
if(document.all) 
return window.event; 
func=SearchEvent.caller; 
while(func!=null) 
{ 
var arg0=func.arguments[0]; 
if(arg0) 
{ 
if(arg0.constructor==Event) 
return arg0; 
} 
func=func.caller; 
} 
return null; 
}

简单总结:
以上两个解决方法中,都正确处理 ff和ie下 的事件处理 (不管是onclick="foo()",方式还是 onclick=foo方式)
但是个人建议用 getEvent() 方法来统一处理 事件问题。
先写到这里,大家继续。。
Javascript 相关文章推荐
从javascript语言本身谈项目实战
Dec 27 Javascript
Jquery之美中不足小结
Feb 16 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
javascript操作referer详细解析
Mar 10 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
JS实现放大镜效果
Sep 21 Javascript
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 #Javascript
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 #Javascript
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 #Javascript
无语,javascript居然支持中文(unicode)编程!
Apr 12 #Javascript
几个高效,简洁的字符处理函数
Apr 12 #Javascript
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 #Javascript
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 #Javascript
You might like
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Django中使用group_by的方法
2015/05/26 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
幼儿园教研活动方案
2014/01/19 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis