在FireFox下編寫(xiě)事件處理函數(shù)是很麻煩的事.
因?yàn)镕ireFox并沒(méi)有 window.event . 如果要得到 event 對(duì)象,就必須要聲明時(shí)間處理函數(shù)的第一個(gè)參數(shù)為event.
所以為了兼容IE與FireFox,一般的事件處理方法為:
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è)屬性的.
例如
function A()
{
B();
}
function B()
{
alert(B.caller);
}
如果B被A調(diào)用,那么B.caller就是A
另外,函數(shù)有一個(gè)arguments屬性. 這個(gè)屬性可以遍歷函數(shù)當(dāng)前執(zhí)行的參數(shù):
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的個(gè)數(shù)與調(diào)用方有關(guān),而與函數(shù)的參數(shù)定義沒(méi)有任何關(guān)系)
根據(jù)這兩個(gè)屬性,我們可以得到第一個(gè)函數(shù)的event對(duì)象:
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ǔ)充
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;
}
</body></html>
