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 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
php阻止页面后退的方法分享
2014/02/17 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
php之可变变量的实例详解
2017/09/12 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
编写Python CGI脚本的教程
2015/06/29 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
Python八皇后问题解答过程详解
2019/07/29 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
高一家长会邀请函
2014/01/12 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
公司财务部岗位职责
2015/04/14 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers