大笨鳥的私房菜

當我們想要從被 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;
    }