解决 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 相关文章推荐
Prototype源码浅析 String部分(二)
Jan 16 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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 - Html Transfer Code
2006/10/09 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
js实现列表按字母排序
2020/08/11 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
用python 制作图片转pdf工具
2015/01/30 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
Python 防止死锁的方法
2020/07/29 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
现金会计岗位职责
2013/12/05 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
年终工作总结范文2014
2014/11/27 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
JavaScript流程控制(分支)
2021/12/06 Javascript
详解Python中的for循环
2022/04/30 Python