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