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 实例一(first)
Mar 16 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
js实现常用排序算法
Aug 09 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
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
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
js函数般调用正则
2008/04/08 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
好习惯伴我成长演讲稿
2014/05/21 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
主要负责人任命书
2014/06/06 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
亲情作文之母爱
2019/09/25 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电