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 相关文章推荐
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
angular6开发steps步骤条组件
Jul 04 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 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+dbfile开发小型留言本
2006/10/09 PHP
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
javascrpt密码强度校验函数详解
2020/03/18 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
MySQL最常见的操作语句小结
2015/05/07 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
django 模型中的计算字段实例
2020/05/19 Python
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
办公室主任主任岗位责任制
2014/02/11 职场文书
个人收入证明模板
2014/09/18 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
2014年党员整改措施
2014/10/24 职场文书
2014小学年度工作总结
2014/12/20 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
2015年手术室工作总结
2015/05/11 职场文书
学校学期工作总结
2015/08/13 职场文书