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 相关文章推荐
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
Vue中自定义全局组件的实现方法
Dec 08 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
vue debug 二种方法
Sep 16 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
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制作静态网站的模板框架(四)
2006/10/09 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Python运行DLL文件的方法
2020/01/17 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
高中生职业规划范文
2014/03/09 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
班主任评语大全
2014/04/26 职场文书
大学生就业求职信
2014/06/12 职场文书
离职感谢信怎么写
2015/01/22 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
vue+iview实现手机号分段输入框
2022/03/25 Vue.js