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

2019-11-21 01:00:19

字體：大中小

供稿：網(wǎng)友

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

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

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

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

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

如果B被A調(diào)用,那么B.caller就是A
另外,函數(shù)有一個arguments屬性. 這個屬性可以遍歷函數(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的個數(shù)與調(diào)用方有關(guān),而與函數(shù)的參數(shù)定義沒有任何關(guān)系)
根據(jù)這兩個屬性,我們可以得到第一個函數(shù)的event對象:

復(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 對象 
return arg0; 
} 
func=func.caller; 
} 
return null; 
} 

這個例子使用了SearchEvent來搜索event對象. 其中 'Event' 是 FireFox 的 event.constructor .
在該例子運(yùn)行時,
SearchEvent.caller就是showcontent,但是showcontent.arguments[0]是空.所以 func=func.caller 時,func變?yōu)閔andle_click .
handle_click 被 FireFox 調(diào)用, 雖然沒有定義參數(shù),但是被調(diào)用時,第一個參數(shù)就是event,所以handle_click.arguments[0]就是event !
針對上面的知識,我們可以結(jié)合 prototype.__defineGetter__ 來實(shí)現(xiàn) window.event 在 FireFox 下的實(shí)現(xià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也是不相同的,前者是客戶端的腳本,后者是服務(wù)端的腳本和VBScript一樣被服務(wù)端所支持
當(dāng)然我這里不是要說兩者的區(qū)別,只是讓自己了解到自己現(xiàn)在的水平(不是一般的差)...
如果就只給出了上面的代碼,相信剛開始要搞兼容性的朋友一定很難看理解這些代碼的用處
這里我就一一的解釋下上面這些代碼的用法吧
先看下__defineGetter__和__defineSetter__這兩個方法的解釋吧:
一.Getter是一種獲取一個屬性的值的方法，Setter是一種設(shè)置一個屬性的值的方法?？梢詾槿魏晤A(yù)定義的核心對象或用戶自定義對象定getter和setter方法，從而為現(xiàn)有的對象添加新的屬性。
二.可以在什么時候?qū)ο蠛褪录砑有碌膶傩?
1.在對象初始化時定義
2.在對象定義后通過Object的__defineGetter__、__defineSetter__方法來追加定義
詳細(xì)的用法可以在請看這里對__defineGetter__、__defineSetter__的解釋(地址:http://anbutu.javaeye.com/blog/post/194276)
所以我們看到了,在FixPrototypeForGecko()函數(shù)里分別給三個對象添加了屬性,當(dāng)然是在FF下對對象的添加:
HTMLElement添加了"runtimeStyle"屬性,屬性值為element_prototype_get_runtimeStyle函數(shù)的返回的值
window添加了"event"屬性,屬性值為window_prototype_get_event返回的值
Event添加了"srcElement"屬性,基屬性值為event_prototype_get_srcElement函數(shù)所返回的值
這樣我們就為這三個對象在FF下擴(kuò)展了新的屬性
所以我們在判斷瀏覽器是否為FF后執(zhí)行FixPrototypeForGecko()過程,這個時候在FF下這三個對象的就有了新的屬性
于是當(dāng)我們點(diǎn)擊DIV標(biāo)簽后在彈出的窗口中我們看到了"[object HTMLDivElement]"字樣,也說明我們已經(jīng)成功的為window對象添加了event屬性

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

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

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

復(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; 
} 

要明白這個過程就得先明白兩個方法:caller和arguments(在文章上面有相應(yīng)的解釋)
在這里再解釋下constructor構(gòu)造者這個屬性,返回的是對象的相應(yīng)對象的創(chuàng)建者
在while循環(huán)里alert(func)我們就可以看到func.caller的返回了,最后一次返回的就是我們的鼠標(biāo)點(diǎn)擊事件了
因?yàn)閔andle_click()過程是我們在點(diǎn)擊div后執(zhí)行的,所以最后的func.caller就是我們的點(diǎn)擊事件了,這個時候的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)增加了一個條件,是因?yàn)閍rg0.constructor現(xiàn)在的結(jié)果就是MouseEvent
看到這里相信大家也知道在FF下怎樣編寫event了
最后再說下"addEventListener"為對象注冊事件方法

復(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> 