當我們想要從被 event 觸發的 function 中取得 event 物件時,如果 function 並沒有 event 這個參數時該如何取得 event 物件呢?
 

一般而言,我們在撰寫這種 function 時都會在 function 的傳入參數放上 event 這個參數,讓  javascript engine 自動將 event 物件傳入,比方說:
 
    function handler (theEvent) { .....}
   
    document.getElementById('test').onclick = handler;

 
以上為例,雖然我們並沒有在第 2 行的 onclik 傳入 event 物件給 handler,但只要在 handler 的第 1 個傳入參數放上變數,自然就能得到這個觸發的 event 物件,這是因為 javascript engine 會將 event 物件自動傳入。

但有時候我們是在 tag 上直接寫上要觸發的事件與呼叫的方法,如下:
 
    <input type='button' value="click' onclick="handler()">
 
在這種情況下,如何在 handler 中取到 event 事件呢?
 
一種解法是改變一下 tag 中呼叫 function 的寫法,自行將 event 傳入,例如:
 
    <input type='button' value='click' onclick="handler(event)">
 
不過有時我們不能去改變 tag 中呼叫 function 的寫法,這種情況大多是發生在我們要修改的是已經寫好的 function,由於引用的 tag 太多,我們當然沒辦法去一個一個去改動那些引用的 tag,在這種情況下,我們只能用 Function 的 caller 來取得 event 物件。
 
    function handler() {
        var theEvent = handler.caller.arguments[0];
        ......
    }
 
為什麼要用 arguments[0] 呢?如果我們實際把 handler.caller 印出來就知道了:
 
    function onclick(event) {
        handler();
    }
 
呼叫者的第一參數即為我們要的 event 物件,所以用 arguments[0] 取得即可。
 
請注意的是,這種做法只能在 firefox 上使用,因為在 ie 上 handler.caller 印出來的結果是:
 
    function anonymous() {
        handler();
    }
 
從此可以看出 ie 的 javascript engine 並沒有將 event 物件傳入,所以如果我們用 arguments[0] 會抓到 null。那麼為什麼 ie 不傳入 event 物件?那我們該如何在 ie 下取得 event 物件?
 
說到這裏,ie 在這方面可以說比較人性化一點,他的 event 都是放在 window 的 scope 內,所以直接打 event 就行了:例:
  
    function handler() {
        alert(event);
        .....
    }
 
以下提供 ie 與 firefox 通用的寫法
 
    function handler() {
        var theEvent = window.event == null ? handler.caller.arguments[0] : window.event;
    }
創作者介紹
創作者 大笨鳥 的頭像
大笨鳥

大笨鳥的私房菜

大笨鳥 發表在 痞客邦 留言(0) 人氣()