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 相关文章推荐
jquery 插件 人性化的消息显示
Jan 21 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
vue 中directive功能的简单实现
Jan 05 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
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
详解PHP归并排序的实现
2016/10/18 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
详解Python爬虫的基本写法
2016/01/08 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Python中django学习心得
2017/12/06 Python
详解python中index()、find()方法
2019/08/29 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
小学语文教学反思
2014/02/10 职场文书
厨师长岗位职责
2014/03/02 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
教师批评与自我批评
2014/10/15 职场文书
公司放假通知范文
2015/04/14 职场文书
物资采购管理制度
2015/08/06 职场文书