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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
js中作用域的实例解析
Mar 16 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
使用requests库制作Python爬虫
2018/03/25 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
在pycharm中实现删除bookmark
2020/02/14 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
营销主管自我评价怎么写
2013/09/19 职场文书
英文简历中的自我评价
2013/10/06 职场文书
商务主管岗位职责
2013/12/08 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
小学教学随笔感言
2014/02/26 职场文书
库房管理员岗位职责
2015/02/12 职场文书
法律意见书范文
2015/06/04 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
vue判断按钮是否可以点击
2022/04/09 Vue.js
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript