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 相关文章推荐
js列举css中所有图标的实现代码
Jul 04 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 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 header Content-Type类型小结
2011/07/03 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
python使用多线程不断刷新网页的方法
2015/03/31 Python
python爬虫基本知识
2018/03/05 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
解决python 文本过滤和清理问题
2019/08/28 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
外贸英语毕业生自荐信
2013/11/14 职场文书
关于学习的演讲稿
2014/05/10 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
联谊活动总结范文
2015/05/09 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
Go Plugins插件的实现方式
2021/08/07 Golang