平時我們取得事件物件一般寫法如下:
function getEvent(event) {
return event || window.event // IE:window.event
}
如果沒有參數,也可寫成(非IE :事件物件會自動傳遞給對應的事件處理函數,且為第一個參數):
function getEvent() {
return arguments[0] || window.event // IE:window.event
}
這樣的寫法在除Firefox(測試版本:3.0.12,下同) 外的瀏覽器上運作都不會有問題,但Firefox 為什麼例外呢?讓我們這樣一種情形:
<button id="btn" onclick="foo()">按鈕</button>
<script>
function foo(){
var e = getEvent();
alert(e);}
</script>
運行結果在Firefox 中是undefined,為什麼呢?
在Firefox 中呼叫其實是這樣的,先呼叫執行的是:
function onclick(event) {
foo();
}
然後調用執行的是:
function foo(){
var e = getEvent();
alert(e);
}
會發現在Firefox 下onclick="foo()" 中的foo() 無法自動傳入事件物件參數,而預設傳遞給了系統產生的onclick 函數,那本例我們可以透過getEvent.caller.caller.arguments[ 0] 取得事件物件。
因此,我們的getEvent 可以最佳化成(參考yui_2.7.0b 中的event/event-debug.js 中getEvent 方法):
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;
}
當然還有一個很簡單的解決方法,就是手動將參數傳遞給onclick="foo()":
<button id="btn" onclick="foo(event)">按鈕</button>