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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
老生常谈Bootstrap媒体对象
Jul 06 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 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生成略缩图代码
2012/07/16 PHP
CURL状态码列表(详细)
2013/06/27 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
python中常用的九种预处理方法分享
2016/09/11 Python
在Python中增加和插入元素的示例
2018/11/01 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
美术教师自我鉴定
2014/02/12 职场文书
出生公证委托书
2014/04/03 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS