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 通过name快速取值示例
Jan 24 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 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
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
php curl常用的5个经典例子
2017/01/20 PHP
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
domReady的实现案例
2016/11/23 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
Node.js连接mongodb实例代码
2017/06/06 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
python3 读写文件换行符的方法
2018/04/09 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
python可视化实现KNN算法
2019/10/16 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
python制作微博图片爬取工具
2021/01/16 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
MySQL面试题
2014/01/12 面试题
小升初自荐信怎么写
2015/03/26 职场文书
个人廉政承诺书
2015/04/28 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python