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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
简单三步,搞掂内存泄漏
Mar 10 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 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
一个PHP的ZIP压缩类分享
2014/05/04 PHP
PHP单例模式详细介绍
2015/07/01 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
浅谈Python单向链表的实现
2015/12/24 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
python安装后的目录在哪里
2020/06/21 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
竞选演讲稿范文
2013/12/28 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
假面舞会策划方案
2014/05/29 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
小学假期安全广播稿
2014/09/28 职场文书
信用卡工资证明范本
2014/10/17 职场文书
2014年销售员工作总结
2014/12/01 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
Python 阶乘详解
2021/10/05 Python
Oracle表空间与权限的深入讲解
2021/11/17 Oracle