解决 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 Firefox与IE 替换节点的方法
Feb 24 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
JavaScript多种页面刷新方法小结
Apr 04 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
vue下的@change事件的实现
Oct 25 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 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模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
告诉大家什么是JSON
2008/06/10 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
Vue中使用sass实现换肤功能
2018/09/07 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python 随机森林算法及其优化详解
2019/07/11 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
计算机专业毕业生推荐信
2013/11/25 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js