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


Posted in Javascript onNovember 26, 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 下的实现:

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

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;
}
</body></html>

Javascript 相关文章推荐
JavaScript几种形式的树结构菜单
May 10 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
node.js如何操作MySQL数据库
Oct 29 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 Javascript
原生js实现放大镜组件
Jan 22 Javascript
DHTML 中的绝对定位
Nov 26 #Javascript
js验证表单第二部分
Nov 25 #Javascript
js验证表单大全
Nov 25 #Javascript
禁止刷新,回退的JS
Nov 25 #Javascript
用函数式编程技术编写优美的 JavaScript
Nov 25 #Javascript
通过JAVASCRIPT读取ASP设定的COOKIE
Nov 24 #Javascript
键盘控制事件应用教程大全
Nov 24 #Javascript
You might like
德生PL550的电路分析
2021/03/02 无线电
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
AI人工智能 Python实现人机对话
2017/11/13 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
查看django版本的方法分享
2018/05/14 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
int在python中的含义以及用法
2019/06/27 Python
python pytest进阶之fixture详解
2019/06/27 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
应聘教师自荐信
2013/10/12 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
工作会议主持词
2014/03/17 职场文书
服务标语大全
2014/06/18 职场文书
师范毕业生求职信
2014/07/11 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
公务员考察材料范文
2014/12/23 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
SQL写法--行行比较
2021/08/23 SQL Server