1. 程式人生 > >jQuery通過event獲取點擊事件的事件對象

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

block clientx offsetx color 函數 move get cti highlight

要想搞明白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:

技術分享

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