JavaScript事件的對象

JavaScript事件的對象。JavaScript事件的一個重要方面是它們擁有一些相對一致的特點,可以給我們的開發提供更多的強大功能。最方便和強大的就是事件對象瞭,它們可以幫你處理鼠標和鍵盤方面的很多事情,此外我們還可以修改一般事件的捕獲或者冒泡流的函數。

1.事件對象

事件處理函數的一個標準特性是以某些方式訪問的事件對象包含有關於當前事件的上下文信息。

事件處理三部分組成:對象.事件處理函數=函數。例如:單擊文檔任意處。

除瞭用匿名函數的方法作為被執行的函數,也可以設置成獨立的函數。

//eg:單擊文檔任何處
 document.onclick = function () {
    alert(this);			//HTMLDocument,代表是document
 };

 window.onload = function () {
    document.onclick = box;	//因為box()函數被onclick綁定瞭,所以裡面的this代表document
 };

    box();	//object Window,如果是在全局范圍調用box(),那麼this代表window

 function box() {
 alert(this);	//HTMLDocument,代表是document
 }

當觸發某個事件時,會產生一個事件對象,這個對象包含著所有與事件有關的信息。包括導致事件的元素、事件的類型、以及其他與特定事件相關的信息。

事件對象,我們一般稱作為event對象,這個對象是瀏覽器通過函數把這個對象作為參數傳遞過來的。那麼首先,我們就必須驗證一下,在執行函數中有沒有傳遞參數,是否可以得到隱藏的參數。

//是否可以得到隱藏的參數。
 function box() {
        alert(arguments.length);				//獲取參數的數量:0
 }

 box();

 document.onclick = function () {  //獲取參數的數量:1
     alert(arguments.length);			//如果是事件處理函數綁定的函數,瀏覽器會默認傳遞一個參數,這個參數就是event對象
     alert(arguments[0]);				//MouseEvent,鼠標事件對象
 };

this關鍵字和上下文
通過事件綁定的執行函數是可以得到一個隱藏參數的。說明,瀏覽器會自動分配一個參數,這個參數其實就是event對象。

比較簡單的做法,直接通過接收參數來得到即可

直接接收event對象,是W3C的做法,IE不支持,IE自己定義瞭一個event對象,直接在window.event獲取即可。

//eg:事件兼容IE瀏覽器
    window.onload = function (){
    
        document.onclick=function(evt){
            var e = evt || window.event;   //W3C || IE
            alert(e);
        };
    };

 //PS:window.event這個屬性IE是支持的,Chrome也是支持的,
 //PS:Chrome也是支持W3C的
 //PS:如果說W3C和IE的都支持的話,那麼就已W3C為準


//跨瀏覽器左中右鍵單擊響應 function getButton(evt){ var e = evt||window.event; if(evt){ return e.button; }else if(window.event){ switch(e.button){ case 1: return 0; case 4: return 1; case 2: return 2; } } } document.onmouseup=function(evt){ if(getButton(evt)==0){ alert("you press left button!"); }else if(getButton(evt)==1){ alert("you press midle button!"); }else if(getButton(evt)==2){ alert("you press right button!"); } };

2.鼠標事件

鼠標事件是Web上面最常用的一類事件,畢竟鼠標還是最主要的定位設備。那麼通過事件對象可以獲取到鼠標按鈕信息和屏幕坐標獲取等。

//獲取可視區及屏幕區的坐標
window.onload = function(){

    document.onclick=function(evt){
        var e = evt || window.event;   //W3C || IE
        alert(e.clientX+','+e.clientY+','+e.screenX+','+e.screenY);
    };
};

隻有在主鼠標按鈕被單擊時(常規一般是鼠標左鍵)才會觸發click事件,因此檢測按鈕的信息並不是必要的。但對於mousedown和mouseup事件來說,則在其event對象存在一個button屬性,表示按下或釋放按鈕。

非IE(W3C)中的button屬性


 

IE中的button屬性

在絕大部分情況下,我們最多隻使用主次中三個單擊鍵,IE給出的其他組合鍵一般無法使用上。所以,我們隻需要做上這三種兼容即可。

 


//跨瀏覽器左中右鍵單擊響應 function getButton(evt){ var e = evt||window.event; if(evt){ return e.button; }else if(window.event){ switch(e.button){ case 1: return 0; case 4: return 1; case 2: return 2; } } } document.onmouseup=function(evt){ if(getButton(evt)==0){ alert("you press left button!"); }else if(getButton(evt)==1){ alert("you press midle button!"); }else if(getButton(evt)==2){ alert("you press right button!"); } };  

2.可視區及屏幕坐標事件對象提供瞭兩組來獲取瀏覽器坐標的屬性,一組是頁面可視區左邊,另一組是屏幕坐標。坐標屬性

 

//獲取可視區及屏幕區的坐標
window.onload = function(){

    document.onclick=function(evt){
        var e = evt || window.event;   //W3C || IE
        alert(e.clientX+','+e.clientY+','+e.screenX+','+e.screenY);
    };
};

3.修改鍵
有時,我們需要通過鍵盤上的某些鍵來配合鼠標來觸發一些特殊的事件。這些鍵為:Shfit、Ctrl、Alt和Meat(Windows中就是Windows鍵,蘋果機中是Cmd鍵),它們經常被用來修改鼠標事件和行為,所以叫修改鍵。

 

//雙擊修改鍵--按住shift並雙擊左鍵
window.onload = function () {
    document.ondblclick = function (evt) {
        alert(getKey(evt));
    };
};
function getKey(evt) {
    var e = evt || window.event;
    var keys = [];

    if (e.shiftKey) keys.push('shift');
    if (e.ctrlKey) keys.push('ctrl');
    if (e.altKey) keys.push('alt');	//單擊+alt和360的快捷鍵沖突瞭
    return keys;
}

發佈留言