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 Ajax.ashx 高效分页实现代码
Oct 20 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
Vue Element校验validate的实例
Sep 21 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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简单实现MVC
2015/02/05 PHP
PHP模块化安装教程
2016/06/01 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
windows下ipython的安装与使用详解
2016/10/20 Python
python画环形图的方法
2020/03/25 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Python 读取位于包中的数据文件
2020/08/07 Python
Python函数调用追踪实现代码
2020/11/27 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
大学毕业生自我鉴定
2013/11/05 职场文书
机械工程师的岗位职责
2013/11/17 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
初中政治教学反思
2014/01/17 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
新年联欢会主持词
2014/03/27 职场文书
个人委托书格式
2014/04/04 职场文书
四年级评语大全
2014/04/21 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
干部对照检查材料范文
2014/08/26 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
军训个人总结
2015/03/03 职场文书