解决 FireFox 下[使用event很麻烦] 的问题.


Posted in Javascript onAugust 22, 2006

在FireFox下编写事件处理函数是很麻烦的事.
因为FireFox并没有 window.event . 如果要得到 event 对象,就必须要声明时间处理函数的第一个参数为event.

所以为了兼容IE与FireFox,一般的事件处理方法为:
btn.onclick=handle_btn_click;
function handle_btn_click(evt)
{
    if(evt==null)evt=window.event;//IE
    //处理事件.
}
对于简单的程序,这不算麻烦.

但对于一些复杂的程序,某写函数根本就不是直接与事件挂钩的.如果要把event传进该参数,那么所有的方法都要把event传来传去..这简直就是噩梦.

下面介绍一个解决这个麻烦事的方法,与原理.

JScript中,函数的调用是有一个 func.caller 这个属性的.
例如 
function A()
{
    B();
}
function B()
{
    alert(B.caller);
}
如果B被A调用,那么B.caller就是A

另外,函数有一个arguments属性. 这个属性可以遍历函数当前执行的参数:
function myalert()
{
    var arr=[];
    for(var i=0;i        arr[i]=myalert.arguments[i];
    alert(arr.join("-"));
}
alert("hello","world",1,2,3)
就能显示 hello-world-1-2-3
(arguments的个数与调用方有关,而与函数的参数定义没有任何关系)

根据这两个属性,我们可以得到第一个函数的event对象:
btn.onclick=handle_click;
function handle_click()
{
    showcontent();
}
function showcontent()
{
    var evt=SearchEvent();
    if(evt&&evt.shiftKey)//如果是基于事件的调用,并且shift被按下
        window.open(global_helpurl);
    else
        location.href=global_helpurl;
}
function SearchEvent()
{
    func=SearchEvent.caller;
    while(func!=null)
    {
        var arg0=func.arguments[0];
        if(arg0)
        {
            if(arg0.constructor==Event) // 如果就是event 对象
                return arg0;
        }
        func=func.caller;
    }
    return null;
}
这个例子使用了SearchEvent来搜索event对象. 其中 'Event' 是 FireFox 的 event.constructor .
在该例子运行时,
SearchEvent.caller就是showcontent,但是showcontent.arguments[0]是空.所以 func=func.caller 时,func变为handle_click .
handle_click 被 FireFox 调用, 虽然没有定义参数,但是被调用时,第一个参数就是event,所以handle_click.arguments[0]就是event !

针对上面的知识,我们可以结合 prototype.__defineGetter__ 来实现 window.event 在 FireFox 下的实现:

下面给出一个简单的代码.. 有兴趣的可以补充

<script>
if(window.addEventListener) 
{ 
    FixPrototypeForGecko(); 
} 
function FixPrototypeForGecko() 
{ 
    HTMLElement.prototype.__defineGetter__("runtimeStyle",element_prototype_get_runtimeStyle); 
    window.constructor.prototype.__defineGetter__("event",window_prototype_get_event); 
    Event.prototype.__defineGetter__("srcElement",event_prototype_get_srcElement); 
} 
function element_prototype_get_runtimeStyle() 
{ 
    //return style instead... 
    return this.style; 
} 
function window_prototype_get_event() 
{ 
    return SearchEvent(); 
} 
function event_prototype_get_srcElement() 
{ 
    return this.target; 
} 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; 
}
</script>
</body></html>
Javascript 相关文章推荐
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
微信小程序开发探究
Dec 27 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
Javascript客户端脚本的设计和应用
Aug 21 #Javascript
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 #Javascript
去除链接虚线全面分析总结
Aug 15 #Javascript
静态的动态续篇之来点XML
Aug 15 #Javascript
实用javaScript技术-屏蔽类
Aug 15 #Javascript
巧妙破除网页右键禁用的十大绝招
Aug 12 #Javascript
总结一些js自定义的函数
Aug 05 #Javascript
You might like
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
PHP开发中四种查询返回结果分析
2011/01/02 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
详解vue v-model
2020/08/31 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
go和python调用其它程序并得到程序输出
2014/02/10 Python
python 换位密码算法的实例详解
2017/07/19 Python
python3.6数独问题的解决
2019/01/21 Python
降低python版本的操作方法
2020/09/11 Python
几款好用的python工具库(小结)
2020/10/20 Python
财务出纳员岗位职责
2013/11/26 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
2015年春节标语口号
2014/12/09 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
结婚典礼致辞
2015/07/28 职场文书
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers