解决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 Prototype对象
Jan 07 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
jquery validate表单验证插件
Sep 06 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 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
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
php获取错误信息的方法
2015/07/17 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
php上传excel表格并获取数据
2017/04/27 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
phpStorm2020 注册码
2020/09/17 PHP
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Python命令行click参数用法解析
2019/12/19 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
接口可以包含哪些成员
2012/09/30 面试题
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
老干部工作汇报材料
2014/10/28 职场文书
党员公开承诺书2015
2015/01/21 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书