解决 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 相关文章推荐
仿微博字符限制效果实现代码
Apr 20 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
vue实现底部菜单功能
Jul 24 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
浅谈js闭包理解
Mar 28 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
最新最全的手机号验证正则表达式
Feb 24 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来实现网络服务
2009/09/15 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
js压缩利器
2007/02/20 Javascript
javascript 动态添加事件代码
2008/11/30 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
django创建自定义模板处理器的实例详解
2017/08/14 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
北京奥运会主题口号
2014/06/13 职场文书
党员作风建设自查报告
2014/10/23 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
医院见习报告范文
2014/11/03 职场文书
工作证明格式范文
2015/06/15 职场文书
电频谱管理的原则是什么
2022/02/18 无线电