解决 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学习点滴 call、apply的区别
Oct 22 Javascript
php与js的区别是什么
Aug 05 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 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音乐采集(部分代码)
2007/02/14 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
Python Socket传输文件示例
2017/01/16 Python
python下载图片实现方法(超简单)
2017/07/21 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
预备党员思想汇报范文
2014/01/11 职场文书
品牌宣传方案
2014/03/21 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
岗位明星事迹材料
2014/05/18 职场文书
好听的队名和口号
2014/06/09 职场文书
个人股份合作协议书
2014/10/24 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
2014年宣传工作总结
2014/11/18 职场文书
预备党员半年考察意见
2015/06/01 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python