事件處理是編寫動態(tài)網(wǎng)頁的基礎，網(wǎng)頁可以對用戶的操作做出響應。比如，在網(wǎng)頁中按了一下方向鍵的左鍵，瀏覽器也不知道用戶要做什么。那怎么辦呢？于是瀏覽器采用了一種更為高明的方法，那就是定義許多事件，程序員可以通過向這些事件注冊處理函數(shù)的辦法進行相應的處理。如剛才提到的在網(wǎng)頁中按下方向鍵的左鍵，如果是在一款網(wǎng)頁游戲中，那用戶的意思是角色向左移動，那么網(wǎng)頁游戲的程序員就可以對鍵盤事件進行注冊，檢查用戶按下的鍵是否為向左的方向鍵，如果是則實現(xiàn)角色向左移動的操作。本章就對這種事件處理機制進行詳細講述。7.1事件與傳播機制

事件是瀏覽器響應用戶操作的一種機制，對這一機制支持的一套措施稱之為“事件模型”。JavaScript的事件模型并不單純，目前使用的事件模型有兩種，這兩種事件模型并不完全一致，這就給大家掌握事件處理帶來了一定的復雜性。這兩種事件模型分別是標準事件模型（由W3C制訂）和IE事件模型，IE事件模型只有IE瀏覽器中使用，但卻不能忽視它的存在，因為大部分計算機上運行的都是Windows操作系統(tǒng)，所以IE瀏覽器也占有巨大的市場份額，忽視它的存在無疑會帶來嚴重的后果。在IE事件模型還沒有被標準事件模型和諧之前，還是要掌握兩種事件模型。兩種事件模型的不同之處在于事件對象、傳播機制和事件處理上。下面分別說明這兩處事件處理模型。標準模型的事件傳播分為三個階段[25]：第一階段稱為“捕捉階段（CapturePhase）”——是指事件發(fā)生后，從window對象沿著DOM樹結(jié)構(gòu)向目標節(jié)點傳播。在這一階段中，觸發(fā)事件的節(jié)點的任何祖先注冊了事件處理程序，都可以對該事件進行處理。第二階段稱為“目標階段（TargetPhase）”——此階段發(fā)生在觸發(fā)事件的節(jié)點本身，注冊的事件處理程序（函數(shù)）會被執(zhí)行。第三階段稱為“冒泡階段（BubblingPhase）”——在此階段中事件從觸發(fā)節(jié)點沿著DOM樹結(jié)構(gòu)傳回到window對象中。標準事件模型的事件傳播過程如圖7-1所示。圖中顯示的是鼠標懸停在網(wǎng)面中表格的某單元格（其內(nèi)容為RiverCharlie）上觸發(fā)的事件的傳播過程。為了鞏固前面學習的DOM樹結(jié)構(gòu)（參見6.1節(jié)），請各位讀者給出圖7-1對應的HTML文檔，進一步理解DOM樹的結(jié)構(gòu)。圖7-1標準事件模型的事件傳播（圖片來源W3C）在標準事件模型中，所有事件的處理都可以在捕捉階段進行，但并不是所有事件都可以在冒泡階段進行處理。因為事件分為兩類：輸入事件和高級語義事件[25]。輸入事件是由用戶發(fā)起的，如鼠標單擊事件；高級語義事件是由系統(tǒng)內(nèi)部觸發(fā)的事件，如網(wǎng)頁的加載等。高級語義事件是不支持冒泡傳播的，所以在冒泡傳播階段是不能處理高級語義事件的。IE事件模型只支持冒泡形式的事件傳播。所以，所有事件只能在冒泡階段處理。事件傳播機制決定了事件如何進行處理，所以請大家一定要理解這些內(nèi)容。7.2常用事件

DOMAPI提供200多個事件，還有瀏覽器各自提供的非標準事件，這么多事件沒辦法一一介紹，所以這里只介紹常用的事件。對于其他用到的事件，請參閱DOMAPI手冊或相關網(wǎng)站。常用事件包括鼠標事件、鍵盤事件、窗口事件、表單事件、拖拽事件（HTML5新增事件）、粘貼事件、打印事件、媒體事件（HTML5新增事件）、動畫事件（新增的CSS3事件）、服務器發(fā)送事件和其他事件。這里只討論常用的鼠標事件、鍵盤事件、表單事件和一些其他事件，拖拽事件、媒體事件和動畫事件的討論已經(jīng)超出了本書內(nèi)容的范疇，請參閱HTML5和CSS3的相關書籍。常見事件如表7-1所示。*注：所有事件請參考文獻[26]。處理事件涉及到注冊、取消事件處理函數(shù)——也稱為事件處理器

，該部分內(nèi)容將在7.4節(jié)進行介紹。

事件處理器——對于微軟用戶來說，此處不確切，刪除下面介紹事件處理中非常重要的事件對象，它記錄了事件發(fā)生時的詳細信息，用于事件處理。7.3事件對象

處理事件時需要知道事件的詳細信息，這些詳細信息，如事件源——即觸發(fā)事件的DOM節(jié)點（或稱為網(wǎng)頁元素）或原因、事件發(fā)生鼠標的位置，或者觸發(fā)事件的按鍵等，都記錄在事件對象中。事件對象的生成和傳遞在兩種事件模型中是不同的：◆標準事件模型——事件對象在事件發(fā)生時生成，作為參數(shù)傳遞給事件處理函數(shù)?！鬒E事件模型——事件對象作為Window對象的全局屬性，在事件處理函數(shù)中直接訪問。7.3.1Event對象

Event對象是事件對象的基本對象，它記錄了事件發(fā)生時詳細的信息，通過它可以對事件進行更精細的操作。標準事件模型的Event常用屬性如表7-2所示，常用方法如表7-3所示。IE事件模型的Event對象與標準Event對象略有不同，target屬性在IE模型的Event對象中為srcEelement屬性。表7-3列出了標準模型的Event對象的常用方法。表7-3Event對象方法IE模型的Event對象中以returnValue=false表示取消事件的默認事件處理函數(shù)的執(zhí)行，即相當于preventDefault()。以cancelBubble=true表示阻止事件繼續(xù)冒泡，相當于stopPropagation()。7.3.2MouseEventMouseEvent對象（IE瀏覽器中稱為PointerEvent）記錄了鼠標事件發(fā)生時的詳細信息，它是Event對象的子對象，包含Event對象的屬性和方法。表7-4列出了MouseEvent對象的屬性。對于button屬性返回的值到底代表哪個鼠標鍵呢？button的返回值與代表的鼠標鍵有以下對應關系：◆

0——鼠標左鍵?！?/p>

1——鼠標滾輪或中間的鍵（如果有的話）?！?/p>

2——鼠標右鍵。但是要注意，IE8以及更早的版本返回值代表的鍵有不同的含義，如下所示：◆

1——鼠標左鍵?！?/p>

2——鼠標右鍵?！?/p>

4——滾輪或中間的鍵（如果有的話）。還有一點需要注意，對于鼠標設置為左手習慣的話，button的返回值正好的相反的，也就是代表左鍵的0表示右鍵，表示右鍵的2表示左鍵。which屬性也可以表示事件發(fā)生時按下的鼠標鍵，但表示方法與button不同，返回值與鼠標鍵的對應關系如下：◆

0——沒有鍵被按下?！?/p>

1——鼠標左鍵?！?/p>

2——滾輪或者中間鍵。◆

3——鼠標右鍵。鼠標事件發(fā)生時按下多個鍵的話（或者說按下多個鍵觸發(fā)鼠標事件時）可以檢查buttons屬性，其可能值和表示的鍵對應關系如下:◆

0——沒有鍵被按下。◆

1——鼠標左鍵?！?/p>

2——鼠標右鍵?！?/p>

4——滾輪鍵或中間鍵?！?/p>

8——第4個鍵（典型的是“瀏覽器后退鍵”）。◆

16——第5個鍵（典型的是“瀏覽器前進鍵”）。如果多個鍵被按下則返回值為多個鍵返回值的“和”。如鼠標左鍵和右鍵同時被按下，則返回值為3（左鍵為1，右鍵為2，1+2=3）。7.3.3KeyboardEvent對象KeyboardEvent對象記錄了事件發(fā)生（或者說按下鍵盤上的鍵觸發(fā)事件時）時按下鍵的信息，它的屬性如表7-5所示。注：IE8及更早版本的瀏覽器不支持charCode屬性。fromCharCode()可以把Unicode代碼轉(zhuǎn)換成對應的字符。HashChangeEventObject、PageTransitionEventObject、FocusEventObject、AnimationEventObject、TransitionEventObject、WheelEve