解決 FireFox 下[使用event很麻煩] 的問題.
更新時(shí)間:2006年08月22日 00:00:00 作者:
在FireFox下編寫事件處理函數(shù)是很麻煩的事.
因?yàn)镕ireFox并沒有 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ù)雜的程序,某寫函數(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ù)定義沒有任何關(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)用, 雖然沒有定義參數(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ǔ)充
<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>
因?yàn)镕ireFox并沒有 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ù)雜的程序,某寫函數(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ù)定義沒有任何關(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)用, 雖然沒有定義參數(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ǔ)充
復(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)文章
JavaScript操作select元素和option的實(shí)例代碼
這篇文章主要介紹了JavaScript操作select元素和option的實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-01-01JS動(dòng)畫實(shí)現(xiàn)回調(diào)地獄promise的實(shí)例代碼詳解
這篇文章主要介紹了JS動(dòng)畫實(shí)現(xiàn)回調(diào)地獄promise的實(shí)例代碼詳解,需要的朋友可以參考下2018-11-11JavaScript 正則應(yīng)用詳解【模式、欲查、反向引用等】
這篇文章主要介紹了JavaScript 正則應(yīng)用,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript 正則表達(dá)式模式、欲查、反向引用等相關(guān)概念、原理與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05