JAVASCRIPT網頁應用程式設計

第二章

事件（Event）和監聽

事件可稱得上是 JavaScript 應用程式的核心，它不但是使用者與應用程式互動的第一道

防線，也是觸發一切程式邏輯的起點。不過，它也是 JavaScript 尚未標準化時，最常引

發問題的環節。當 Netscape 和 Microsoft 的瀏覽器戰爭進行得如火如荼之際，雙方陣營

都故意選用截然不同、互不相容的事件模型（event model）。雖然後來 W3C 提供了標準

化的事件模型，但 IE 還是堅持要撐到最新版本 IE9 推出之時，才願意捨棄先前特立獨

行的事件模型實作方式。

還好，jQuery 和 Prototype 這類函式庫，已經貼心的幫我們處理掉這些瀏覽器相容性問

題，只要面對這類函式庫所提供的單一 API，不需自行處理所有的事件模型實作方式，

就能讓一切正常運作。儘管如此，建議最好還是了解各種事件實作方式背後的運作原

理。本章會先花些篇幅說明一下 W3C 模型，再帶你看看利用這些廣受好評的函式庫所

撰寫的範例程式。

監聽事件

如果想要監聽事件，需要靠

addEventListener()

函式，這個函式會接收三組參數：

事件

類型

（例如

click

）、

監聽器函式

（也就是回叫函式），以及

是否採用捕捉模式

（稍後會再詳

細說明這組參數的用途）。利用前兩組參數，就可以將監聽器函式依附在 DOM 元件上。

這麼一來，只要觸發 DOM 元件的某個事件（例如

click

），就會執行依附在該元件上的

函式：

var button = document.getElementById("createButton"); ...