JavaScript的事件對象

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

一．事件對象
事件處理函數的一個標準特性是，以某些方式訪問的事件對象包含有關於當前事件的上
下文信息。
事件處理三部分組成：對象.事件處理函數=函數。例如：單擊文檔任意處。

document.onclick = function () {
alert('Lee');
};

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

除了用匿名函數的方法作爲被執行的函數，也可以設置成獨立的函數。

document.onclick = box; //直接賦值函數名即可，無須括號
function box() {
alert('Lee');
}

this 關鍵字和上下文
在面向對象那章我們瞭解到：在一個對象裏，由於作用域的關係，this 代表着離它最近
對象。

var input = document.getElementsByTagName('input')[0];
input.onclick = function () {
alert(this.value); //HTMLInputElement，this 表示input 對象
};

從上面的拆分，我們並沒有發現本章的重點：事件對象。那麼事件對象是什麼？它在哪
裏呢？當觸發某個事件時，會產生一個事件對象，這個對象包含着所有與事件有關的信息。
包括導致事件的元素、事件的類型、以及其它與特定事件相關的信息。
事件對象，我們一般稱作爲event 對象，這個對象是瀏覽器通過函數把這個對象作爲參
數傳遞過來的。那麼首先，我們就必須驗證一下，在執行函數中沒有傳遞參數，是否可以得
到隱藏的參數。

function box() { //普通空參函數
alert(arguments.length); //0，沒有得到任何傳遞的參數
}
input.onclick = function () { //事件綁定的執行函數
alert(arguments.length); //1，得到一個隱藏參數
};

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

input.onclick = function () {
alert(arguments[0]); //MouseEvent，鼠標事件對象
};

上面這種做法比較累，那麼比較簡單的做法是，直接通過接收參數來得到即可。

input.onclick = function (evt) { //接受event 對象，名稱不一定非要event
alert(evt); //MouseEvent，鼠標事件對象
};

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

input.onclick = function (evt) {
var e = evt || window.event; //實現跨瀏覽器兼容獲取event 對象
alert(e);
};

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

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

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

function getButton(evt) { //跨瀏覽器左中右鍵單擊相應
var e = evt || window.event;
if (evt) { //Chrome 瀏覽器支持W3C 和IE
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('按下了左鍵！');
} else if (getButton(evt) == 1) {
alert('按下了中鍵！');
} else if (getButton(evt) == 2) {
alert('按下了右鍵！' );
}
};

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

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

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

 

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');
return keys;
}
document.onclick = function (evt) {
alert(getKey(evt));
};

三．鍵盤事件
用戶在使用鍵盤時會觸發鍵盤事件。“DOM2 級事件”最初規定了鍵盤事件，結果又刪
除了相應的內容。最終還是使用最初的鍵盤事件，不過IE9 已經率先支持“DOM3”級鍵盤
事件。
1.鍵碼
在發生keydown 和keyup 事件時，event 對象的keyCode 屬性中會包含一個代碼，與鍵
盤上一個特定的鍵對應。對數字字母字符集，keyCode 屬性的值與ASCII 碼中對應小寫字母
或數字的編碼相同。字母中大小寫不影響。

document.onkeydown = function (evt) {
alert(evt.keyCode); //按任意鍵，得到相應的keyCode
};

不同的瀏覽器在keydown 和keyup 事件中，會有一些特殊的情況：
在Firefox 和Opera 中，分號鍵時keyCode 值爲59，也就是ASCII 中分號的編碼；而IE
和Safari 返回186，即鍵盤中按鍵的鍵碼。
PS：其他一些特殊情況由於瀏覽器版本太老和市場份額太低，這裏不做補充。

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

function getCharCode(evt) {
var e = evt || window.event;
if (typeof e.charCode == 'number') {
return e.charCode;
} else {
return e.keyCode;
}
}

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

keyCode 和charCode 區別如下：比如當按下“a 鍵（重視是小寫的字母）時，
在Firefox 中會獲得
keydown： keyCode is 65 charCode is 0
keyup： keyCode is 65 charCode is 0
keypress： keyCode is 0 charCode is 97

在IE 中會獲得
keydown： keyCode is 65 charCode is undefined
keyup： keyCode is 65 charCode is undefined
keypress： keyCode is 97 charCode is undefined

而當按下shift 鍵時，在Firefox 中會獲得
keydown：keyCode is 16 charCode is 0
keyup： keyCode is 16 charCode is 0

在IE 中會獲得
keydown：keyCode is 16 charCode is undefined
keyup： keyCode is 16 charCode is undefined
keypress：不會獲得任何的charCode 值，因爲按shift 並沒輸入任何的字符，並且也不
會觸發keypress 事務

PS：在keydown 事務裏面，事務包含了keyCode – 用戶按下的按鍵的物理編碼。
在keypress 裏，keyCode 包含了字符編碼，即默示字符的ASCII 碼。如許的情勢實用於
所有的瀏覽器– 除了火狐，它在keypress 事務中的keyCode 返回值爲0。

四．W3C與IE
在標準的DOM 事件中，event 對象包含與創建它的特定事件有關的屬性和方法。觸發
的事件類型不一樣，可用的屬性和方法也不一樣。

在這裏，我們只看所有瀏覽器都兼容的屬性或方法。首先第一個我們瞭解一下W3C 中
的target 和IE 中的srcElement，都表示事件的目標。

function getTarget(evt) {
var e = evt || window.event;
return e.target || e.srcElement; //兼容得到事件目標DOM 對象
}
document.onclick = function (evt) {
var target = getTarget(evt);
alert(target);
};

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

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

 

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');
};

在阻止冒泡的過程中，W3C 和IE 採用的不同的方法，那麼我們必須做一下兼容。

function stopPro(evt) {
var e = evt || window.event;
window.event ? e.cancelBubble = true : e.stopPropagation();
}