快捷導(dǎo)航

讓Firefox支持event對(duì)象實(shí)現(xiàn)代碼

更新時(shí)間：2009年11月07日 00:46:02 作者：

FireFox并沒(méi)有 window.event ,所以在FireFox下編寫(xiě)事件處理函數(shù)是很麻煩的事。如果要得到 event 對(duì)象,就必須要聲明時(shí)間處理函數(shù)的第一個(gè)參數(shù)為event

通常為了兼容IE與FireFox,一般的事件處理方法為:

復(fù)制代碼代碼如下:

 
btn.onclick=handle_btn_click; 
function handle_btn_click(evt){ 
if(evt==null)evt=window.event;//IE 
//處理事件. 
} 

對(duì)于簡(jiǎn)單的程序,這不算麻煩.
但對(duì)于一些復(fù)雜的程序,某寫(xiě)函數(shù)根本就不是直接與事件掛鉤的.如果要把event傳進(jìn)該參數(shù),那么所有的方法都要把event傳來(lái)傳去..這簡(jiǎn)直就是噩夢(mèng).
下面介紹一個(gè)解決這個(gè)麻煩事的方法,與原理.
JScript中，函數(shù)的調(diào)用是有一個(gè) func.caller 這個(gè)屬性的.
例如

復(fù)制代碼代碼如下:

 
function A() 
{ 
B(); 
} 
function B() 
{ 
alert(B.caller); 
} 

如果B被A調(diào)用,那么B.caller就是A
另外,函數(shù)有一個(gè)arguments屬性. 這個(gè)屬性可以遍歷函數(shù)當(dāng)前執(zhí)行的參數(shù):

復(fù)制代碼代碼如下:

 
function myalert() 
{ 
var arr=[]; 
for(var i=0;i<myalert.arguments.length;i++) 
arr[i]=myalert.arguments[i]; 
alert(arr.join("-")); 
} 
myalert("hello","world",1,2,3) 

就能顯示 hello-world-1-2-3
(arguments的個(gè)數(shù)與調(diào)用方有關(guān),而與函數(shù)的參數(shù)定義沒(méi)有任何關(guān)系)
根據(jù)這兩個(gè)屬性,我們可以得到第一個(gè)函數(shù)的event對(duì)象:

復(fù)制代碼代碼如下:

 
btn.onclick=handle_click; 
function handle_click() 
{ 
showcontent(); 
} 
function showcontent() 
{ 
var evt=SearchEvent(); 
if(evt&&evt.shiftKey)//如果是基于事件的調(diào)用,并且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 對(duì)象 
return arg0; 
} 
func=func.caller; 
} 
return null; 
} 

這個(gè)例子使用了SearchEvent來(lái)搜索event對(duì)象. 其中 'Event' 是 FireFox 的 event.constructor .
在該例子運(yùn)行時(shí),
SearchEvent.caller就是showcontent,但是showcontent.arguments[0]是空.所以 func=func.caller 時(shí),func變?yōu)閔andle_click .
handle_click 被 FireFox 調(diào)用, 雖然沒(méi)有定義參數(shù),但是被調(diào)用時(shí),第一個(gè)參數(shù)就是event,所以handle_click.arguments[0]就是event !
針對(duì)上面的知識(shí),我們可以結(jié)合 prototype.__defineGetter__ 來(lái)實(shí)現(xiàn) window.event 在 FireFox 下的實(shí)現(xiàn):
下面給出一個(gè)簡(jiǎn)單的代碼.. 有興趣的可以補(bǔ)充(本人已經(jīng)有修改)

復(fù)制代碼代碼如下:

 
<script language="javascript"> 
function handle_click() { 
if(window.addEventListener) 
{ 
FixPrototypeForGecko(); 
alert(window.event.srcElement) 
} 
} 
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) 
if(arg0.constructor==Event||arg0.constructor==MouseEvent || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)) 
return arg0; 
} 
func=func.caller; 
} 
return null; 
} 
</script> 
<div id="mydiv" onclick="handle_click();">click here!!</div> 

javascript和JScript也是不相同的,前者是客戶(hù)端的腳本,后者是服務(wù)端的腳本和VBScript一樣被服務(wù)端所支持
當(dāng)然我這里不是要說(shuō)兩者的區(qū)別,只是讓自己了解到自己現(xiàn)在的水平(不是一般的差)...
如果就只給出了上面的代碼,相信剛開(kāi)始要搞兼容性的朋友一定很難看理解這些代碼的用處
這里我就一一的解釋下上面這些代碼的用法吧
先看下__defineGetter__和__defineSetter__這兩個(gè)方法的解釋吧:
一.Getter是一種獲取一個(gè)屬性的值的方法，Setter是一種設(shè)置一個(gè)屬性的值的方法?？梢詾槿魏晤A(yù)定義的核心對(duì)象或用戶(hù)自定義對(duì)象定getter和setter方法，從而為現(xiàn)有的對(duì)象添加新的屬性。
二.可以在什么時(shí)候?qū)?duì)象和事件添加新的屬性?
1.在對(duì)象初始化時(shí)定義
2.在對(duì)象定義后通過(guò)Object的__defineGetter__、__defineSetter__方法來(lái)追加定義
詳細(xì)的用法可以在請(qǐng)看這里對(duì)__defineGetter__、__defineSetter__的解釋(地址:http://anbutu.javaeye.com/blog/post/194276)
所以我們看到了,在FixPrototypeForGecko()函數(shù)里分別給三個(gè)對(duì)象添加了屬性,當(dāng)然是在FF下對(duì)對(duì)象的添加:
HTMLElement添加了"runtimeStyle"屬性,屬性值為element_prototype_get_runtimeStyle函數(shù)的返回的值
window添加了"event"屬性,屬性值為window_prototype_get_event返回的值
Event添加了"srcElement"屬性,基屬性值為event_prototype_get_srcElement函數(shù)所返回的值
這樣我們就為這三個(gè)對(duì)象在FF下擴(kuò)展了新的屬性
所以我們?cè)谂袛酁g覽器是否為FF后執(zhí)行FixPrototypeForGecko()過(guò)程,這個(gè)時(shí)候在FF下這三個(gè)對(duì)象的就有了新的屬性
于是當(dāng)我們點(diǎn)擊DIV標(biāo)簽后在彈出的窗口中我們看到了"[object HTMLDivElement]"字樣,也說(shuō)明我們已經(jīng)成功的為window對(duì)象添加了event屬性

復(fù)制代碼代碼如下:

 
if(window.addEventListener) { 
FixPrototypeForGecko(); 
alert(window.event.srcElement) 
} 

大家可以看到element_prototype_get_runtimeStyle過(guò)程和event_prototype_get_srcElement過(guò)程所以返回的值都能很容易理解
那下面我們來(lái)看看window_prototype_get_event()過(guò)程是怎么樣返回事件的
過(guò)程的返回值是SearchEvent()過(guò)程的結(jié)果,看下這個(gè)過(guò)程

復(fù)制代碼代碼如下:

 
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||arg0.constructor==MouseEvent) 
if(arg0.constructor==Event||arg0.constructor==MouseEvent || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)) 
return arg0; 
} 
func=func.caller; 
} 
return null; 
} 

要明白這個(gè)過(guò)程就得先明白兩個(gè)方法:caller和arguments(在文章上面有相應(yīng)的解釋)
在這里再解釋下constructor構(gòu)造者這個(gè)屬性,返回的是對(duì)象的相應(yīng)對(duì)象的創(chuàng)建者
在while循環(huán)里alert(func)我們就可以看到func.caller的返回了,最后一次返回的就是我們的鼠標(biāo)點(diǎn)擊事件了
因?yàn)閔andle_click()過(guò)程是我們?cè)邳c(diǎn)擊div后執(zhí)行的,所以最后的func.caller就是我們的點(diǎn)擊事件了,這個(gè)時(shí)候的funcj就是 handle_click(),那么也就相當(dāng)于是handle_click.caller,當(dāng)然handle_click的調(diào)用者當(dāng)然就是onclick 事件了,也就是[MouseEvent]
可以看到我在 if(arg0.constructor==Event||arg0.constructor==MouseEvent)增加了一個(gè)條件,是因?yàn)閍rg0.constructor現(xiàn)在的結(jié)果就是MouseEvent
看到這里相信大家也知道在FF下怎樣編寫(xiě)event了
最后再說(shuō)下"addEventListener"為對(duì)象注冊(cè)事件方法

復(fù)制代碼代碼如下:

 
<script> 
function addObjectEvent(objId,eventName,eventFunc) 
{ 
var targetObj = document.getElementById(objId); 
if(targetObj) 
{ 
if(targetObj.attachEvent) 
{ 
targetObj.attachEvent(eventName,eventFunc); 
} 
else if(targetObj.addEventListener) 
{ 
eventName = eventName.toString().replace(/on(.*)/i,'$1'); 
targetObj.addEventListener(eventName,eventFunc,true); 
} 
} 
} 
function test1() 
{ 
alert('test1'); 
} 
function test2() 
{ 
alert('test2'); 
} 
</script> 
<div id="hi" onclick="MyTest();">on click</div> 
<script> 
addObjectEvent('hi','onclick',test1); 
addObjectEvent('hi','onclick',test2);//先執(zhí)行test2(隊(duì)列) 
</script> 