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拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
javascript连续赋值问题
Jul 08 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
JS实现盒子拖拽效果
Feb 06 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
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
理解javascript闭包
2015/12/15 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
json前后端数据交互相关代码
2018/09/19 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
Java及python正则表达式详解
2017/12/27 Python
关于Python的一些学习总结
2018/05/25 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
python实现网页录音效果
2020/10/26 Python
主持人演讲稿范文
2013/12/28 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
创先争优制度
2014/01/21 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
岗位职责范本大全
2015/02/26 职场文书
民主生活会意见
2015/06/05 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
2015年女工委工作总结
2015/07/27 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers