DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript獲取事件對象的注意事項
JavaScript獲取事件對象的注意事項
編輯:關於JavaScript     

網頁制作poluoluo文章簡介:JavaScript 獲取事件對象的一個注意點.

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

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 foo(){
   var e =  getEvent();
   alert(e);
}

然後調用執行的是:

function onclick(event) {
    foo();
}

會發現在 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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved