第一百二十節，JavaScript事件對象

時間 2019-11-12

標籤第一百二十 javascript 事件對象欄目 JavaScript 简体版

原文原文鏈接

JavaScript事件對象html

學習要點：windows

1.事件對象數組

2.鼠標事件瀏覽器

3.鍵盤事件函數

4.W3C與IE學習

JavaScript事件的一個重要方面是它們擁有一些相對一致的特色，能夠給你的開發提供更多的強大功能。最方便和強大的就是事件對象，他們能夠幫你處理鼠標事件和鍵盤敲擊方面的狀況，此外還能夠修改通常事件的捕獲/冒泡流的函數。this

一．事件對象編碼

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

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

//在頁面任意地方單擊鼠標觸發事件
document.onclick = function () {
    alert('Lee');
};

PS：以上程序的名詞解釋：click表示一個事件類型，單擊。onclick表示一個事件處理函數或綁定對象的屬性(或者叫事件監聽器、偵聽器)。document表示一個綁定的對象，用於觸發某個元素區域。function()匿名函數是被執行的函數，用於觸發後執行。

除了用匿名函數的方法做爲被執行的函數，也能夠設置成獨立的函數。

//在頁面任意地方單擊鼠標觸發事件
document.onclick = box;                        //直接賦值函數名便可，無須括號
function box() {
    alert('Lee');
}

this關鍵字和上下文

在面向對象那章咱們瞭解到：在一個對象裏，因爲做用域的關係，this表明着離它最近對象。

這裏的this表明的input元素對象，由於input元素對象被onclick綁定了

//<input type="text" value="文本"/>
window.onload = function () { //window.onload事件，等待html執行完成後，執行匿名函數
    var input = document.getElementsByTagName('input')[0];
    input.onclick = function () {
        alert(this.value);                    //HTMLInputElement，this表示input對象
    };
};

從上面的拆分，咱們並無發現本章的重點：事件對象。那麼事件對象是什麼？它在哪裏呢？當觸發某個事件時，會產生一個事件對象，這個對象包含着全部與事件有關的信息。包括致使事件的元素、事件的類型、以及其它與特定事件相關的信息。

事件對象

事件對象，咱們通常稱做爲event對象，這個對象是瀏覽器經過函數把這個對象做爲參數傳遞過來的。那麼首先，咱們就必須驗證一下，在執行函數中沒有傳遞參數，是否能夠獲得隱藏的參數。

//<input type="text" value="文本"/>
window.onload = function () { //window.onload事件，等待html執行完成後，執行匿名函數
    var input = document.getElementsByTagName('input')[0];
    box();

    function box() {                            //普通空參函數
        alert(arguments.length);                    //0，沒有獲得任何傳遞的參數
    }

    input.onclick = function () {                    //事件綁定的執行函數
        alert(arguments.length);                    //1，獲得一個隱藏參數
    };
};

event對象。

這個對象包含着全部與事件有關的信息。包括致使事件的元素、事件的類型、以及其它與特定事件相關的信息。

經過上面兩組函數中，咱們發現，經過事件綁定的執行函數是能夠獲得一個隱藏參數的。說明，瀏覽器會自動分配一個參數，這個參數其實就是event對象。

//<input type="text" value="文本"/>
window.onload = function () { //window.onload事件，等待html執行完成後，執行匿名函數
    var input = document.getElementsByTagName('input')[0];
    input.onclick = function () {
        alert(arguments[0]);                    //MouseEvent，鼠標事件對象
    };
};

事件執行的函數，能夠設置一個形式參數，這個形式參數接收到的是瀏覽器傳過來的event對象，也就是MouseEvent，鼠標事件對象

上面這種作法比較累，那麼比較簡單的作法是，直接經過接收參數來獲得便可

//<input type="text" value="文本"/>
window.onload = function () { //window.onload事件，等待html執行完成後，執行匿名函數
    var input = document.getElementsByTagName('input')[0];
    input.onclick = function (evt) {                //接受event對象，名稱不必定非要event
        alert(evt);                                //MouseEvent，鼠標事件對象
    };
};

直接接收event對象，是W3C的作法，IE不支持，IE本身定義了一個event對象，直接在window.event獲取便可。

兼容版本

//<input type="text" value="文本"/>
window.onload = function () { //window.onload事件，等待html執行完成後，執行匿名函數
    var input = document.getElementsByTagName('input')[0];
    input.onclick = function (evt) {
        var e = evt || window.event;                //實現跨瀏覽器兼容獲取event對象
        alert(e);
    };
};

二．鼠標事件

鼠標事件是Web上面最經常使用的一類事件，畢竟鼠標仍是最主要的定位設備。那麼經過事件對象能夠獲取到鼠標按鈕信息和屏幕座標獲取等。

1.鼠標按鈕

只有在主鼠標按鈕被單擊時(常規通常是鼠標左鍵)纔會觸發click事件，所以檢測按鈕的信息並非必要的。但對於onmousedown和onmouseup事件來講，則在其event對象存在一個button屬性，表示按下或釋放按鈕。

button屬性，返回鼠標信息的數值
使用方式：
event對象.button

//<input type="text" value="文本"/>
window.onload = function () { //window.onload事件，等待html執行完成後，執行匿名函數
    var input = document.getElementsByTagName('input')[0];
    input.onmouseup = function (evt) {     //當鼠標釋放時
        var e = evt || window.event;                //實現跨瀏覽器兼容獲取event對象
        alert(e.button);   //button屬性，返回鼠標信息的數值
        //點擊右鼠標返回0
        //中鼠標返回1
        //左鼠標返回2
        //注意：可是IE返回不同，IE有本身的數值
    };
};

非IE(W3C)中的button屬性

值	說明
0	表示主鼠標按鈕(常規通常是鼠標左鍵)
1	表示中間的鼠標按鈕(鼠標滾輪按鈕)
2	表示次鼠標按鈕(常規通常是鼠標右鍵)

IE中的button屬性

值	說明
0	表示沒有按下按鈕
1	表示主鼠標按鈕(常規通常是鼠標左鍵)
2	表示次鼠標按鈕(常規通常是鼠標右鍵)
3	表示同時按下了主、次鼠標按鈕
4	表示按下了中間的鼠標按鈕
5	表示同時按下了主鼠標按鈕和中間的鼠標按鈕
6	表示同時按下了次鼠標按鈕和中間的鼠標按鈕
7	表示同時按下了三個鼠標按鈕

PS：在絕大部分狀況下，咱們最多隻使用主次中三個單擊鍵，IE給出的其餘組合鍵通常沒法使用上。因此，咱們只須要作上這三種兼容便可。

鼠標按鈕信息兼容

//當用戶在頁面釋放鼠標時，執行匿名函數
document.onmouseup = function (evt) {  //設置一個參數接收瀏覽器傳過來的event對象
    if (getButton(evt) == 0) {   //將接收到的對象傳入getButton函數，判斷返回0打印裏面的字符串
        alert('按下了左鍵！');
    } else if (getButton(evt) == 1) {   //將接收到的對象傳入getButton函數，判斷返回1打印裏面的字符串
        alert('按下了中鍵！');
    } else if (getButton(evt) == 2) {   //將接收到的對象傳入getButton函數，判斷返回2打印裏面的字符串
        alert('按下了右鍵！');
    }
};

function getButton(evt) {    //跨瀏覽器左中右鍵單擊相應，接收event對象
    //若是沒有獲取到event對象，說明是ie瀏覽器就用window.event獲取
    var e = evt || window.event;
    if (evt) {        //若是event對象爲真，
        return e.button;         //就返回鼠標對應的數值
    } else if (window.event) {  //判斷若是ie方式返回真，就要作兼容，由於IE和w3c標準返回數值表明不一樣
        switch (e.button) {  //判斷event對象返回值
            case 1 :         //若是IE方式返回值是1
                return 0;    //返回w3c標準數值，使其統一
            case 4 :         //若是IE方式返回值是4
                return 1;    //返回w3c標準數值，使其統一
            case 2 :         //若是IE方式返回值是2
                return 2;    //返回w3c標準數值，使其統一
        }
    }
}

2.可視區及屏幕座標

事件對象提供了兩組來獲取瀏覽器座標的屬性，一組是頁面可視區座標，另外一組是屏幕座標。

座標屬性

屬性	說明
clientX	可視區X座標，距離左邊框的位置
clientY	可視區Y座標，距離上邊框的位置
screenX	屏幕區X座標，距離左屏幕的位置
screenY	屏幕區Y座標，距離上屏幕的位置

clientX屬性，可視區X座標，距離左邊框的位置
clientY屬性，可視區Y座標，距離上邊框的位置
screenX屬性，屏幕區X座標，距離左屏幕的位置
screenY屬性，屏幕區Y座標，距離上屏幕的位置

使用方式：

event對象.clientX

其餘相同

//當用戶在頁面任意地方點擊鼠標，執行匿名函數
document.onclick = function (evt) {  //接收一個event對象
    //若是沒法接收event對象，說明是ie瀏覽器，就用ie方式獲取event對象
    var e = evt || window.event;
    //打印clientX屬性，可視區X座標，距離左邊框的位置加，clientY屬性，可視區Y座標，距離上邊框的位置
    alert(e.clientX + ',' + e.clientY);
    //打印screenX屬性，屏幕區X座標，距離左屏幕的位置加，screenY屬性，屏幕區Y座標，距離上屏幕的位置
    alert(e.screenX + ',' + e.screenY);
};

3.修改鍵

有時，咱們須要經過鍵盤上的某些鍵來配合鼠標來觸發一些特殊的事件。這些鍵爲：Shfit、Ctrl、Alt和Meat(Windows中就是Windows鍵，蘋果機中是Cmd鍵)，它們常常被用來修改鼠標事件和行爲，因此叫修改鍵。

修改鍵屬性

屬性	說明
shiftKey	判斷是否按下了Shfit鍵
ctrlKey	判斷是否按下了ctrlKey鍵
altKey	判斷是否按下了alt鍵
metaKey	判斷是否按下了windows鍵，IE不支持

shiftKey判斷是否按下了Shfit鍵
ctrlKey判斷是否按下了ctrlKey鍵
altKey判斷是否按下了alt鍵
metaKey判斷是否按下了windows鍵，IE不支持

使用方式：

event對象.shiftKey

其餘相同

//當用戶在頁面任意地方點擊是，執行匿名函數
document.onclick = function (evt) {  //接收一個參數event對象
    alert(getKey(evt)); //執行函數打印，將event對象當作參數傳入函數
};

function getKey(evt) {  //定義函數，接收event對象
    //若是瀏覽器不支持直接獲取event對象，說明是IE瀏覽器就用window.event獲取event對象
    var e = evt || window.event;
    var keys = [];   //建立一個空數組

    if (e.shiftKey) keys.push('shift');      //判斷若是用戶按下了shift鍵，向數組裏添加一個元素
    if (e.ctrlKey) keys.push('ctrl');    //判斷若是用戶按下了ctrl鍵，向數組裏添加一個元素
    if (e.altKey) keys.push('alt');      //判斷若是用戶按下了alt鍵，向數組裏添加一個元素

    return keys;  //返回數組
}

三．鍵盤事件

用戶在使用鍵盤時會觸發鍵盤事件。「DOM2級事件」最初規定了鍵盤事件，結果又刪除了相應的內容。最終仍是使用最初的鍵盤事件，不過IE9已經率先支持「DOM3」級鍵盤事件。

1.鍵碼

在發生onkeydown和onkeyup事件時，event對象的keyCode屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。對數字字母字符集，keyCode屬性的值與ASCII碼中對應小寫字母或數字的編碼相同。字母中大小寫不影響。也就是每個鍵對應一個數字

keyCode屬性，返回按鍵對應的按鍵碼，注意：事件要是鍵盤事件如onkeydown
使用方式：
event對象.keyCode

//當用戶按下任意鍵時，執行匿名函數
document.onkeydown = function (evt) {  //接收event對象
    //若是沒法直接獲取event對象，說明是IE瀏覽器就用IE的方法window.event獲取event對象
    var e = evt || window.event;
    alert(e.keyCode);     //打印按鍵對應的數字碼
};

不一樣的瀏覽器在onkeydown和onkeyup事件中，會有一些特殊的狀況：

在Firefox和Opera中，分號鍵時keyCode值爲59，也就是ASCII中分號的編碼；而IE和Safari返回186，即鍵盤中按鍵的鍵碼。

PS：其餘一些特殊狀況因爲瀏覽器版本太老和市場份額過低，這裏不作補充。

2.字符編碼

Firefox、Chrome和Safari的event對象都支持一個charCode屬性，這個屬性只有在發生onkeypress事件時才包含值，並且這個值是按下的那個鍵所表明字符的ASCII編碼。此時的keyCode屬性一般等於0或者也可能等於所按鍵的編碼。IE和Opera則是在keyCode屬性中保存字符的ASCII編碼。

charCode屬性，字符鍵所表明字符的ASCII編碼，注意：事件要是onkeypress鍵盤事件如onkeypress，
使用方式：
event對象.charCode

//當用戶按下字符鍵時，執行匿名函數
document.onkeypress = function (evt) {  //接收event對象
    //若是沒法直接獲取event對象，說明是IE瀏覽器就用IE的方法window.event獲取event對象
    var e = evt || window.event;
    alert(e.charCode);     //打印字符鍵所表明字符的ASCII編碼
};

字符按鍵支持全部瀏覽器兼容

window.onload = function () { //window.onload事件，等待html執行完成後，執行匿名函數
//當用戶按下字符鍵時，執行匿名函數
    document.onkeypress = function (evt) {  //接收event對象
        alert(getCharCode(evt));  //執行兼容函數

        function getCharCode(evt) {  //接收event對象
            //若是沒法直接獲取event對象，說明是IE瀏覽器，就用IE的window.event獲取event對象
            var e = evt || window.event;
            //判斷event對象的charCode屬性若是是數字類型
            if (typeof e.charCode == 'number') {
                //執行charCode屬性
                return e.charCode;
            } else {
                //不然執行keyCode屬性
                return e.keyCode;
            }
        }

    };
};

可使用String.fromCharCode()將ASCII編碼轉換成實際的字符。

window.onload = function () { //window.onload事件，等待html執行完成後，執行匿名函數
//當用戶按下字符鍵時，執行匿名函數
    document.onkeypress = function (evt) {  //接收event對象
        alert(String.fromCharCode(getCharCode(evt)));  //將返回的ASCII編碼轉換成實際的字符

        function getCharCode(evt) {  //接收event對象
            //若是沒法直接獲取event對象，說明是IE瀏覽器，就用IE的window.event獲取event對象
            var e = evt || window.event;
            //判斷event對象的charCode屬性若是是數字類型
            if (typeof e.charCode == 'number') {
                //執行charCode屬性
                return e.charCode;
            } else {
                //不然執行keyCode屬性
                return e.keyCode;
            }
        }

    };
};

keyCode屬性和charCode屬性區別以下：好比當按下「a鍵（重視是小寫的字母）時，

在Firefox中會得到

onkeydown： keyCode is 65 charCode is 0

onkeyup： keyCode is 65 charCode is 0

onkeypress： keyCode is 0 charCode is 97

在IE中會得到

onkeydown： keyCode is 65 charCode is undefined

onkeyup： keyCode is 65 charCode is undefined

onkeypress： keyCode is 97 charCode is undefined

而當按下shift鍵時，在Firefox中會得到

onkeydown：keyCode is 16 charCode is 0

onkeyup： keyCode is 16 charCode is 0

在IE中會得到

onkeydown：keyCode is 16 charCode is undefined

onkeyup： keyCode is 16 charCode is undefined

onkeypress：不會得到任何的charCode屬性值，由於按shift並沒輸入任何的字符，而且也不會觸發onkeypress事務

PS：在onkeydown事務裏面，事務包含了keyCode屬性 – 用戶按下的按鍵的物理編碼。

在onkeypress裏，keyCode屬性包含了字符編碼，即默示字符的ASCII碼。如許的情勢實用於全部的瀏覽器 – 除了火狐，它在onkeypress事務中的keyCode屬性返回值爲0。

四．W3C與IE

在標準的DOM事件中，event對象包含與建立它的特定事件有關的屬性和方法。觸發的事件類型不同，可用的屬性和方法也不同。

W3C中event對象的屬性和方法

屬性/方法	類型	讀/寫	說明
bubbles	Boolean	只讀	代表事件是否冒泡
cancelable	Boolean	只讀	代表是否能夠取消事件的默認行爲
currentTarget	Element	只讀	其事件處理程序當前正在處理事件的那個元素
detail	Integer	只讀	與事件相關的細節信息
eventPhase	Integer	只讀	調用事件處理程序的階段：1表示捕獲階段，2表示「處理目標」，3表示冒泡階段
preventDefault()	Function	只讀	取消事件的默認行爲。若是cancelabel是true，則可使用這個方法
stopPropagation()	Function	只讀	取消事件的進一步捕獲或冒泡。若是bubbles爲true，則可使用這個方法
target	Element	只讀	事件的目標
type	String	只讀	被觸發的事件的類型
view	AbstractView	只讀	與事件關聯的抽象視圖。等同於發生事件的window對象

IE中event對象的屬性

屬性	類型	讀/寫	說明
cancelBubble	Boolean	讀/寫	默認值爲false，但將其設置爲true就能夠取消事件冒泡
returnValue	Boolean	讀/寫	默認值爲true，但將其設置爲false就能夠取消事件的默認行爲
srcElement	Element	只讀	事件的目標
type	String	只讀	被觸發的事件類型

在這裏，咱們只看全部瀏覽器都兼容的屬性或方法，也就是按照IE的來作兼容，由於IE有的，w3c都有，w3c有的IE不必定有

首先第一個咱們瞭解一下W3C中的target和IE中的srcElement，都表示事件的目標。

srcElement屬性，是IE中event對象的屬性，獲取事件event對象的標籤節點
target屬性，是W3C中event對象的屬性，獲取事件event對象的標籤節點

因此要作兼容

//當用戶在頁面任意地方單擊鼠標時，激發匿名函數
document.onclick = function (evt) {  //接收事件的event對象
    var target = getTarget(evt);   //將event對象傳入函數執行自定義函數，將函數賦值給一個變量
    alert(target.tagName);   //打印event對象裏獲取到的元素標籤名稱
};

function getTarget(evt) {  //自定義函數
    //若是沒法直接獲取event對象，說明是IE瀏覽器，就用IE的window.event獲取event對象
    var e = evt || window.event;
    //兼容方式獲取到event對象事件的元素標籤節點，也就是目標
    return e.target || e.srcElement;                
}

經過事件獲得元素節點後，能夠對元素進行讀寫等操做

事件流

事件流是描述的從頁面接受事件的順序，當幾個都具備事件的元素層疊在一塊兒的時候，那麼你點擊其中一個元素，並非只有當前被點擊的元素會觸發事件，而層疊在你點擊範圍的全部元素都會觸發事件。事件流包括兩種模式：冒泡和捕獲。

事件冒泡，是從裏往外逐個觸發。事件捕獲，是從外往裏逐個觸發。那麼現代的瀏覽器默認狀況下都是冒泡模型，而捕獲模式則是早期的Netscape默認狀況。而如今的瀏覽器要使用DOM2級模型的事件綁定機制才能手動定義事件流模式。事件流模式講到事件綁定機制後在說

冒泡模式

// <body>
// <div id="box" style="background-color: #ff0f20;width: 200px;height: 200px;">
//     <input type="button" value="肯定">
// </div>
// </body>
window.onload = function () { //window.onload事件，等待html執行完成後，執行匿名函數
    document.onclick = function () {
        alert('我是document');
    };
    document.documentElement.onclick = function () {
        alert('我是html');
    };
    document.body.onclick = function () {
        alert('我是body');
    };
    document.getElementById('box').onclick = function () {
        alert('我是div');
    };
    document.getElementsByTagName('input')[0].onclick = function () {
        alert('我是input');
    };
};
//當點擊一個元素時，會冒泡向外激發事件，也就是點擊一個元素激發事件後會自動激發父元素的事件

cancelBubble屬性，是IE中event對象的屬性，默認值爲false，但將其設置爲true就能夠取消事件冒泡
stopPropagation()方法，是W3C中event對象的方法，取消事件的進一步捕獲或冒泡。

取消冒泡模式：要在哪一個元素取消，就在哪一個元素執行取消冒泡函數

// <body>
// <div id="box" style="background-color: #ff0f20;width: 200px;height: 200px;">
//     <input type="button" value="肯定">
// </div>
// </body>
window.onload = function () { //window.onload事件，等待html執行完成後，執行匿名函數
    document.onclick = function () {
        alert('我是document');
    };
    document.documentElement.onclick = function () {
        alert('我是html');
    };
    document.body.onclick = function () {
        alert('我是body');
    };
    document.getElementById('box').onclick = function () {
        alert('我是div');
    };
    document.getElementsByTagName('input')[0].onclick = function (evt) {
        //執行取消冒泡函數
        stopPro(evt);  //將event對象傳入函數
        alert('我是input');
    };
};
//當點擊一個元素時，會冒泡向外激發事件，也就是點擊一個元素激發事件後會自動激發父元素的事件

//在阻止冒泡的過程當中，W3C和IE採用的不一樣的方法，那麼咱們必須作一下兼容。
function stopPro(evt) {  //取消冒泡函數
    //若是沒法直接獲取event對象，說明是IE瀏覽器，就用IE的window.event獲取event對象
    var e = evt || window.event;
    //若是window.event獲取event對象能執行就用cancelBubble = true取消冒泡，不然就用stopPropagation()取消冒泡
    window.event ? e.cancelBubble = true : e.stopPropagation();
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。