FireFox JavaScript全局Event对象_javascript技巧

而在FireFox中却没有这样的对象,如果有函数嵌套调用,需要不停的向下传递Event,例如下面的场景。

复制代码 代码如下:

<div style="background-color:Red; width:300px; height:300px;" onclick="Test(event,this);" id="panel"></div>
function Test(event,dom){
Test1(event);
}
function Test1(event){
Test2(event);
}
function Test2(event){
alert(event.target.id);
}

在Test2方法中需要使用event,就需要写成这样。如果在某种场景下,比如添加新功能,需要修改原来的Test2方法,需要访问event对象,而原来Test2方法的签名是Test2(),没有参数event,这时需要修改Test2()为Test2(event) 十分的不美观,虽然JavaScript这样的修改,是方法的重载,但是也破坏了原来的方法签名。
在FireFox中是否有window.event这样的全局变量来获取event?
不幸的是FireFox的对象模型中是没有的,但是可以使用变通的方法取得。例如:

复制代码 代码如下:

function GetEvent(caller){
if(document.all)
return window.event; //For IE.
if(caller == null || typeof(caller) != "function")
return null;
while(caller.caller != null){
caller = caller.caller;
}
return caller.arguments[0];
}

这里使用document.all判断是否是IE浏览器的做法是不好的,应该使用UserAgent来判断,JQuery等类库中有好的实现。
这样上面的 Test2方法就可以不用修改方法签名了:

复制代码 代码如下:

function Test2(){
var event = GetEvent(Test2);
alert(GetEventTarget(event).id);
}
function GetEventTarget(event){
if(document.all)
return event.srcElement;
return event.target;
}

为什么可以写出GetEvent方法,取得Event?
因为在Firefox的事件模型中最初的事件调用是将event显示的传递给方法的,所以可以写出GetEvent方法,取得唤起JavaScript的event。
screen.width-300)this.width=screen.width-300" border=0>

时间: 2024-07-29 04:25:42

FireFox JavaScript全局Event对象_javascript技巧的相关文章

跟我学习javascript的Date对象_javascript技巧

本篇主要介绍Date 日期和时间对象的操作. 1. 介绍 1.1 说明 Date对象,是操作日期和时间的对象.Date对象对日期和时间的操作只能通过方法. 1.2 属性 无: Date对象对日期和时间的操作只能通过方法. 2. 构造函数 2.1 new Date() :返回当前的本地日期和时间 参数:无 返回值: {Date} 返回一个表示本地日期和时间的Date对象. 示例: var dt = new Date(); console.log(dt); // => 返回一个表示本地日期和时间的D

跟我学习javascript的arguments对象_javascript技巧

1.什么是arguments arguments 是是JavaScript里的一个内置对象,它很古怪,也经常被人所忽视,但实际上是很重要的.所有主要的js函数库都利用了arguments对象.所以agruments对象对于javascript程序员来说是必需熟悉的.在javascript函数体内,标识符arguments具有特殊含义.它是调用对象的一个特殊属性,用来引用Arguments对象.Arugments对象就像数组,注意这里只是像并不是哈. javascript函数体内,argument

JavaScript中string对象_javascript技巧

一.String:存储一个字符串,并且提供处理字符串需要的属性和方法. 1.创建String对象:显示和隐式 <DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <head> <title>js函数</title> </head> <script ty

Javascript delete 引用类型对象_javascript技巧

如下面例子: 复制代码 代码如下: var testVar = {            a : {                test : 1            }        },            test1 = {},            test2 = {};         test1.a = testVar.a;        test2.a = testVar.a;/*        delete test1.a;        console.log(test1

浅述Javascript的外部对象_javascript技巧

Window 浏览器: - location:地址 - history:历史 - Document:文档 - screen:窗口 - navigator:帮助 > 1.外部对象就是浏览器提供的API -- **BOM** > 2.这些对象由w3c规定,由浏览器开发者设计并开发 > 3.这些对象分为2部分,其中BOM包含了DOM > 4.我们可以通过js访问这些对象 # 外部对象 > BOM (Browser Object Model)     浏览器对象模型,用来访问和操纵浏

浅析javascript中的Event事件_javascript技巧

1.焦点:当一个元素有焦点的时候,那么他就可以接受用户的输入(不是所有元素都能接受焦点) 给元素设置焦点的方式:    1.点击 2.tab 3.js 2.(例子:输入框提示文字) onfocus:当元素获取焦点时触发:        element.onfocus = function(){};   onblur:当元素失去焦点时触发:        element.onblur = function(){};    obj.focus() 给指定的元素设置焦点 obj.blur() 取消指定

JavaScript事件学习小结(三)js事件对象_javascript技巧

相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www

详解JavaScript的闭包、IIFE、apply、函数与对象_javascript技巧

目录 一.闭包(Closure) 1.1.闭包相关的问题 1.2.理解闭包 二.对象 2.1.对象常量(字面量) 2.2.取值 2.3.枚举(遍历) 2.4.更新与添加 2.5.对象的原型 2.6.删除 2.7.封装 三.函数 3.1.参数对象 (arguments) 3.2.构造函数 3.3.函数调用 3.3.1.call 3.3.2.apply 3.3.3.caller 3.3.4.Callee 3.5.立即执行函数表达式 (IIFE) 3.5.1.匿名函数与匿名对象 3.5.2.函数与函数

浅析JavaScript中的类型和对象_javascript技巧

JavaScript是基于对象的,任何元素都可以看成对象.然而,类型和对象是不同的.本文中,我们除了讨论类型和对象的一些特点之外,更重要的是研究如何写出好的并且利于重用的类型.毕竟,JavaScript这种流行的脚本语言如果能够进行良好的封装,并形成一个庞大的类型库,对于重用是非常有意义的. 网上对于prototype的文章很多,一直没明白核心的思想.最后写了很多例子代码后才明白:prototype只能用在类型上. 以下是一些关于类型和对象的例子,大家看完例子后可能更容易理解类型和对象之间的联系