jQuery通過event獲取點擊事件的事件對象

要想搞明白js的事件機制，必須搞清楚幾個概念：事件對象，事件源，還有事件流

事件對象：

當事件發生時會產生事件對象，事件對象的作用是用來記錄“事件發生是一些相關的信息。注意事件對象只有在事件發生時才會產生，我們無法手動創建，並且事件對象只能在處理函數內部訪問，處理函數允許結束后該對象自動銷毀。

怎么理解那？？

 

<script>  
        document.onmousemove = function (ev) {  
            var e = ev || window.event;  
            var div = document.getElementById('div');  
            div.innerHTML = "clientX:"+ e.clientX;  
        }  
 </script>  

 

 

如上代碼，當onmousemove事件發生時，就會產生一個事件對象，就是程序中的event對象，我們只能在這個匿名函數中訪問到這個event對象，在函數外面是訪問不到的，同樣我們也無法手動創建這個event對象；

 

如何獲取事件對象那？？

var e = event || window.event; 這句話就是定義了一個變量來獲取事件對象，因為不同的瀏覽器獲取事件對象的方法有點不太一樣，IE下是window.event，標准下是event，為 了兼容所以寫了event || window.event.

 

事件對象也分為：

鼠標事件對象，鍵盤事件對象等，顧名思義鼠標事件發生時產生鼠標事件對象，鍵盤事件發生時產生鍵盤事件對象；既然是對象，就必然有一些屬性方法啥的。

鼠標事件對象上的常用屬性：

clientX，clientY，screenX，screenY，offsetX，offsetY

鍵盤事件對象上的屬性有：

keyCode: 用來獲取鍵盤碼的;比如空格的鍵盤是32，回車13等

cltkey: 判斷alt鍵是否被按下，按下是true，反之false

Ctrlkey: 判斷Ctrlkey鍵是否被按下，按下是true，反之false

Shiftkey : 判斷Shiftkey 鍵是否被按下，按下是true，反之false

 

說到這里相信大家應該理解“事件對象”了吧！接着說一說事件源。

事件源：

在事件中，當前操作的那個元素就是事件源。比如網頁元素中a標簽和input都有onclick事件，當點擊a發生onclick事件時，事件源就是a標簽，當點擊input發送onclic事件是，事件源就是input。

如何獲取事件源那？？

IE下：window.event.srcElement  

標准下：event.target

由此可見，我們是通過事件對象獲取到的事件源。

 

 

例如:點擊一個div外部的時候使div消失

    $(document).click(function(event) {
        if ($(event.target).attr("class") != "unitName") {
            if ($("#showDiv").css("display") == "block") {
                $("#showDiv").css("display", "none");// 點擊外部的時候隱藏名字提示框
            }
        }
    })

 

查看事件的target: