解決FireFox下[使用event很麻煩]的問題
更新時(shí)間:2006年11月26日 00:00:00 作者:
在FireFox下編寫事件處理函數(shù)是很麻煩的事.
因?yàn)镕ireFox并沒有 window.event . 如果要得到 event 對象,就必須要聲明時(shí)間處理函數(shù)的第一個(gè)參數(shù)為event.
所以為了兼容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傳來傳去..這簡直就是噩夢.
下面介紹一個(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ù)定義沒有任何關(guān)系)
根據(jù)這兩個(gè)屬性,我們可以得到第一個(gè)函數(shù)的event對象:
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;
}
這個(gè)例子使用了SearchEvent來搜索event對象. 其中 '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)用, 雖然沒有定義參數(shù),但是被調(diào)用時(shí),第一個(gè)參數(shù)就是event,所以handle_click.arguments[0]就是event !
針對上面的知識(shí),我們可以結(jié)合 prototype.__defineGetter__ 來實(shí)現(xiàn) window.event 在 FireFox 下的實(shí)現(xiàn):
下面給出一個(gè)簡單的代碼.. 有興趣的可以補(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>
因?yàn)镕ireFox并沒有 window.event . 如果要得到 event 對象,就必須要聲明時(shí)間處理函數(shù)的第一個(gè)參數(shù)為event.
所以為了兼容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傳來傳去..這簡直就是噩夢.
下面介紹一個(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ù)定義沒有任何關(guān)系)
根據(jù)這兩個(gè)屬性,我們可以得到第一個(gè)函數(shù)的event對象:
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;
}
這個(gè)例子使用了SearchEvent來搜索event對象. 其中 '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)用, 雖然沒有定義參數(shù),但是被調(diào)用時(shí),第一個(gè)參數(shù)就是event,所以handle_click.arguments[0]就是event !
針對上面的知識(shí),我們可以結(jié)合 prototype.__defineGetter__ 來實(shí)現(xiàn) window.event 在 FireFox 下的實(shí)現(xiàn):
下面給出一個(gè)簡單的代碼.. 有興趣的可以補(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>
相關(guān)文章
JavaScript 動(dòng)態(tài)添加腳本,并觸發(fā)回調(diào)函數(shù)的實(shí)現(xiàn)代碼
JavaScript 動(dòng)態(tài)添加腳本,并觸發(fā)回調(diào)函數(shù)的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-01-01JavaScript中數(shù)組去重的辦法總結(jié)
你是否在面試的過程中被考到過給你一個(gè)數(shù)組讓你去掉重復(fù)項(xiàng)呢,下面小編就來總結(jié)一下對于數(shù)組去重這道簡單的面試題時(shí),我們可以回答的方法有什么吧2023-06-06JavaScript 學(xué)習(xí)小結(jié)(適合新手參考)
JavaScript常量又稱字面常量,是固化在程序代碼中的信息。變量的主要作用是存取數(shù)據(jù),提供一個(gè)存取信息的容器。2009-07-07js實(shí)現(xiàn)隨機(jī)點(diǎn)名程序
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)點(diǎn)名程序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11