解决 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 相关文章推荐
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
javascript之bind使用介绍
Oct 09 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 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
天津市收音机工业发展史
2021/03/04 无线电
PHP 组件化编程技巧
2009/06/06 PHP
php创建无限级树型菜单
2015/11/05 PHP
深入浅析php json 格式控制
2015/12/24 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
Python文件夹与文件的操作实现代码
2014/07/13 Python
python计算一个序列的平均值的方法
2015/07/11 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python 装饰器使用详解
2017/07/29 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
python文件选择对话框的操作方法
2019/06/27 Python
django 控制页面跳转的例子
2019/08/06 Python
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
公司年会晚宴演讲稿
2014/01/06 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
法律进社区活动总结
2015/05/07 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python