JS 事件對象
事件對象
事件處理函數的一個標準特性是，以某些方式訪問的事件對象包含有關於當前事件的上
下文信息。
事件處理三部分組成：對象.事件處理函數=函數。例如：單擊文檔任意處。
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. = 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();
}
JS 事件對象