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加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
js实现div弹出层的方法
Nov 20 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
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
用libTemplate实现静态网页的生成
2006/10/09 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
简单的JS多重继承示例
2008/03/13 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Python中datetime模块参考手册
2017/01/13 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
买房子个人收入证明
2014/01/16 职场文书
村容村貌整治方案
2014/05/21 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫