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: