firefox事件处理之自动查找event的函数(用于onclick=foo())


Posted in Javascript onAugust 05, 2010

IE与firefox事件处理
在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 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
vue router demo详解
Oct 13 Javascript
Js获取事件对象代码
Aug 05 #Javascript
zeroclipboard复制到剪切板的flash
Aug 04 #Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 #Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 #Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 #Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 #Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 #Javascript
You might like
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
Python实现句子翻译功能
2017/11/14 Python
神经网络python源码分享
2017/12/15 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
基于Django统计博客文章阅读量
2019/10/29 Python
python入门之井字棋小游戏
2020/03/05 Python
Python文件操作基础流程解析
2020/03/19 Python
Python requests模块cookie实例解析
2020/04/14 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
关于Java finally的面试题
2016/04/27 面试题
高级编程求职信模板
2014/02/16 职场文书
讲解员培训方案
2014/05/04 职场文书
英语分层教学实施方案
2014/06/15 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
卖车协议书范文
2016/03/23 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android
MySQL事务的隔离级别详情
2022/07/15 MySQL