解決 FireFox 下[使用event很麻煩] 的問題.
更新時間:2006年08月22日 00:00:00 作者:
在FireFox下編寫事件處理函數(shù)是很麻煩的事.
因為FireFox并沒有 window.event . 如果要得到 event 對象,就必須要聲明時間處理函數(shù)的第一個參數(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傳來傳去..這簡直就是噩夢.
下面介紹一個解決這個麻煩事的方法,與原理.
JScript中,函數(shù)的調(diào)用是有一個 func.caller 這個屬性的.
例如
function A()
{
B();
}
function B()
{
alert(B.caller);
}
如果B被A調(diào)用,那么B.caller就是A
另外,函數(shù)有一個arguments屬性. 這個屬性可以遍歷函數(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的個數(shù)與調(diào)用方有關(guān),而與函數(shù)的參數(shù)定義沒有任何關(guān)系)
根據(jù)這兩個屬性,我們可以得到第一個函數(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;
}
這個例子使用了SearchEvent來搜索event對象. 其中 'Event' 是 FireFox 的 event.constructor .
在該例子運行時,
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__ 來實現(xiàn) window.event 在 FireFox 下的實現(xiàn):
下面給出一個簡單的代碼.. 有興趣的可以補(bǔ)充
<script>
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;
}
</script>
</body></html>
因為FireFox并沒有 window.event . 如果要得到 event 對象,就必須要聲明時間處理函數(shù)的第一個參數(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傳來傳去..這簡直就是噩夢.
下面介紹一個解決這個麻煩事的方法,與原理.
JScript中,函數(shù)的調(diào)用是有一個 func.caller 這個屬性的.
例如
function A()
{
B();
}
function B()
{
alert(B.caller);
}
如果B被A調(diào)用,那么B.caller就是A
另外,函數(shù)有一個arguments屬性. 這個屬性可以遍歷函數(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的個數(shù)與調(diào)用方有關(guān),而與函數(shù)的參數(shù)定義沒有任何關(guān)系)
根據(jù)這兩個屬性,我們可以得到第一個函數(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;
}
這個例子使用了SearchEvent來搜索event對象. 其中 'Event' 是 FireFox 的 event.constructor .
在該例子運行時,
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__ 來實現(xiàn) window.event 在 FireFox 下的實現(xiàn):
下面給出一個簡單的代碼.. 有興趣的可以補(bǔ)充
復(fù)制代碼 代碼如下:
<script>
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;
}
</script>
</body></html>
相關(guān)文章
Bootstrap導(dǎo)航條學(xué)習(xí)使用(二)
這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航條的使用方法第二篇,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02
js利用appendChild對<li>標(biāo)簽進(jìn)行排序的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s利用appendChild對<li>標(biāo)簽進(jìn)行排序的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10

