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 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
JS清除选择内容的方法
Jan 29 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 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中动态显示签名和ip原理
2007/03/28 PHP
生成php程序的php代码
2008/04/07 PHP
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
php之readdir函数用法实例
2014/11/13 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
jquery 插件开发方法小结
2009/10/23 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
python 获取网页编码方式实现代码
2017/03/11 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
学python需要去培训机构吗
2020/07/01 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
英国香水店:The Perfume Shop
2017/03/27 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
法律专业应届本科毕业生求职信
2013/10/25 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
感恩老师主题班会
2015/08/12 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
vue组件vue-esign实现电子签名
2022/04/21 Vue.js