JavaScript 擷取事件對象的注意點

來源:互聯網
上載者:User

平時我們擷取事件對象一般寫法如下:

複製代碼 代碼如下: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>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.