快捷導(dǎo)航

JavaScript 獲取事件對(duì)象的注意點(diǎn)

更新時(shí)間：2009年07月29日 16:30:49 作者：

平時(shí)我們獲取事件對(duì)象一定要將firefox考慮進(jìn)去。

平時(shí)我們獲取事件對(duì)象一般寫(xiě)法如下：

 
function getEvent(event) { 
return event || window.event // IE:window.event 
} 

如果沒(méi)有參數(shù)，也可寫(xiě)成（非IE ：事件對(duì)象會(huì)自動(dòng)傳遞給對(duì)應(yīng)的事件處理函數(shù)，且為第一個(gè)參數(shù)）：

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

 
function getEvent() { 
return arguments[0] || window.event // IE:window.event 
} 

這樣的寫(xiě)法在除 Firefox（測(cè)試版本：3.0.12，下同）外的瀏覽器上運(yùn)行都不會(huì)有問(wèn)題，但 Firefox 為什么例外呢？讓我們這樣一種情形：

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

 
<button id="btn" onclick="foo()">按鈕</button> 
<script> 
function foo(){ 
var e = getEvent(); 
alert(e);} 
</script> 

運(yùn)行結(jié)果在 Firefox 中是 undefined，為什么呢？
在 Firefox 中調(diào)用其實(shí)是這樣的，先調(diào)用執(zhí)行的是：

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

 
function onclick(event) { 
foo(); 
} 

然后調(diào)用執(zhí)行的是：

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

 
function foo(){ 
var e = getEvent(); 
alert(e); 
} 

會(huì)發(fā)現(xiàn)在 Firefox 下 onclick="foo()" 中的 foo() 無(wú)法自動(dòng)傳入事件對(duì)象參數(shù)，而默認(rèn)傳遞給了系統(tǒng)生成的 onclick 函數(shù)，那本例我們可以通過(guò)getEvent.caller.caller.arguments[0] 獲得事件對(duì)象。
因此，我們的 getEvent 可以?xún)?yōu)化成（參照 yui_2.7.0b 中的 event/event-debug.js 中 getEvent 方法）：

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

 
function getEvent(event) { 
var ev = event || window.event; 
if (!ev) { 
var c = this.getEvent.caller; 
while (c) { 
ev = c.arguments[0]; 
if (ev && (Event == ev.constructor || MouseEvent == ev.constructor)) { /懌飛注：YUI 源碼 BUG，ev.constructor 也可能是 MouseEvent，不一定是 Event 
break; 
} 
c = c.caller; 
} 
} 
return ev; 
} 

當(dāng)然還有一個(gè)很簡(jiǎn)單的解決方法，就是手動(dòng)將參數(shù)傳遞給 onclick="foo()"：

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

您可能感興趣的文章: