平時我們獲取事件對象一般寫法如下:
function getEvent(event) { return event || window.event // IE:window.event }
如果沒有參數(shù),也可寫成(非IE :事件對象會自動傳遞給對應的事件處理函數(shù),且為第一個參數(shù)):
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>
運行結(jié)果在 Firefox 中是 undefined,為什么呢?
在 Firefox 中調(diào)用其實是這樣的,先調(diào)用執(zhí)行的是:
function onclick(event) { foo(); }
然后調(diào)用執(zhí)行的是:
function foo(){ var e = getEvent(); alert(e); }
會發(fā)現(xiàn)在 Firefox 下 onclick="foo()" 中的 foo() 無法自動傳入事件對象參數(shù),而默認傳遞給了系統(tǒng)生成的 onclick 函數(shù),那本例我們可以通過getEvent.caller.caller.arguments[0] 獲得事件對象。
因此,我們的 getEvent 可以優(yōu)化成(參照 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; }
當然還有一個很簡單的解決方法,就是手動將參數(shù)傳遞給 onclick="foo()":
<button id="btn" onclick="foo(event)">按鈕</button>
原文:http://www.planabc.net/2009/07/24/tips_for_getting_event_in_javascript/
本文鏈接:http://m.95time.cn/tech/web/2009/6912.asp
出處:藍色理想
責任編輯:bluehearts
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論,我還想發(fā)表評論。
|