FireFox JavaScript全局Event对象


Posted in Javascript onJune 14, 2009

而在FireFox中却没有这样的对象,如果有函数嵌套调用,需要不停的向下传递Event,例如下面的场景。

<div style="background-color:Red; width:300px; height:300px;" onclick="Test(event,this);" id="panel"></div> 
function Test(event,dom){ 
Test1(event); 
} 
function Test1(event){ 
Test2(event); 
} 
function Test2(event){ 
alert(event.target.id); 
}

在Test2方法中需要使用event,就需要写成这样。如果在某种场景下,比如添加新功能,需要修改原来的Test2方法,需要访问event对象,而原来Test2方法的签名是Test2(),没有参数event,这时需要修改Test2()为Test2(event) 十分的不美观,虽然JavaScript这样的修改,是方法的重载,但是也破坏了原来的方法签名。
在FireFox中是否有window.event这样的全局变量来获取event?
不幸的是FireFox的对象模型中是没有的,但是可以使用变通的方法取得。例如:
function GetEvent(caller){ 
if(document.all) 
return window.event; //For IE. 
if(caller == null || typeof(caller) != "function") 
return null; 
while(caller.caller != null){ 
caller = caller.caller; 
} 
return caller.arguments[0]; 
}

这里使用document.all判断是否是IE浏览器的做法是不好的,应该使用UserAgent来判断,JQuery等类库中有好的实现。
这样上面的 Test2方法就可以不用修改方法签名了:
function Test2(){ 
var event = GetEvent(Test2); 
alert(GetEventTarget(event).id); 
} 
function GetEventTarget(event){ 
if(document.all) 
return event.srcElement; 
return event.target; 
}

为什么可以写出GetEvent方法,取得Event?
因为在Firefox的事件模型中最初的事件调用是将event显示的传递给方法的,所以可以写出GetEvent方法,取得唤起JavaScript的event。
FireFox JavaScript全局Event对象
Javascript 相关文章推荐
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
Javascript 错误处理的几种方法
Jun 13 #Javascript
Javascript 学习书 推荐
Jun 13 #Javascript
javascript 框架小结 个人工作经验
Jun 13 #Javascript
动态刷新 dorado树的js代码
Jun 12 #Javascript
firefo xml 读写实现js代码
Jun 11 #Javascript
犀利的js 函数集合
Jun 11 #Javascript
js 操作css实现代码
Jun 11 #Javascript
You might like
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
python获得图片base64编码示例
2014/01/16 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
使用Python实现批量ping操作方法
2020/05/06 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
成人教育自我鉴定
2013/11/01 职场文书
驾驶员岗位职责
2014/01/29 职场文书
三项教育活动实施方案
2014/03/30 职场文书
尼克胡哲观后感
2015/06/08 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android