夢想飛翔

五 、 JavaScript 事件和對象

目標 :

應掌握以下內容：

?

????????? 理解事件驅動機制

????????? 會使用常用的事件觸發機制，如： Click 、 OnChange 等事件

關鍵知識點：

????????? 會使用常用的事件觸發機制，如： Click 、 OnChange 等事件

????????? 常用對象處理語句： this 、 for…in 、 with 和 new 。

????????? JavaScript 內置對象：時間對象， Math 對象、 String 對象和數組對象

????????? JavaScript 常用函數

?

5.1 事件的概念

HTML 規范中常用的標記非常簡單，這是 HTML 語言的一個特點，但同時也是它的功能受到很大的限制。事件是瀏覽器相應用戶交互操作的一種機制。當然，任何程序包括瀏覽器本身都有一套已經設計好的相應各種事件的方法。 JavaScript 的事件處理機制就可以改變瀏覽器響應用戶操作的標準方法，這樣就可以開發出更加具有交互性，更容易使用的 Web 頁面。

為什么要利用 JavaScript 的事件呢？主要有下面的兩個用途：

1 ．驗證用戶輸入窗體的數據。

2 ．增加頁面的動感效果。

一個利用 JavaScript 實現交互功能的 WEB 網頁總是擁有三個部分的內容：

l???????? 在 Head 部分定義一些 JavaScript 函數，其中的一些可能是事件處理函數，另外一些可能是為了配合這些事件處理函數而編寫的普通函數。

l???????? HTML 本身的各種控制標記。

l???????? 擁有句柄屬性的 HTML 標記，主要涉及到一些界面元素。這些元素可以把 HTML 同 JavaScript 代碼相連。

為了理解 JavaScript 的事件處理模型，可以設想一下在一個 WEB 頁面可能會遇到怎樣的用戶相應。歸納起來，必須使用的事件主要有三大類：

一類是引起頁面之間跳轉的事件，主要是超級連接事件。再一類是瀏覽器自己引起的事件，例如網頁的裝載，表單的提交等等。另一類事件是在表單內部同界面對象的交互，包括界面對象的選定、改變等。可以按照應用程序的具體功能自由設計。

5.2 JAVASCRIPT 事件驅動

JavaScript 事件主要包括三大類的事件：超級連接的事件，瀏覽器的事件和界面事件。超級連接事件包括： Click ， MouseOut ， MouseOver ， MouseDown ， MouseUp 事件。瀏覽器事件主要包括：各種元素 Load, Unload 等等。下面我們主要介紹一些常用的事件的處理。

5.2.1 單擊事件

鼠標單擊事件是最最常見得事件，我們只要寫 JavaScript 程序都會用到單擊事件。語法非常的簡單：

請看下面的案例：

當鼠標單擊按鈕的時候，自動彈出一個 alert 對話框，顯示的結果如圖 5-1 所示。
?

圖 5-1 單擊事件

5.2.2 onchange 事件

所謂的 onchange 事件就是當文本框的內容改變的時候，發生的事件。語法和剛才的 Onclick 事件比較的類似：

請看我們下面的 onchange 事件：

當文本框的內容發生改變的時候，就回自動彈出一個 Alert 框，顯示的結果如圖 5-2 所示。

圖 5-2 onchange 事件

5.2.3 onselect 事件

所謂的 onselect 事件就是當文本框的內容被選中的時候，發生的事件。語法和剛才的 Onclick 事件比較的類似：

請看我們下面的 onselect 事件：

當文本框中內容被選中的時候就會自動彈出對話框，顯示的結果如圖 5-3 所示。

圖 5-3 onselect 事件

可以看出當文本框的內容 test 被選中的時候， onselect 事件就被觸發了。

5.2.4 onfocus 事件

所謂的 onfocus 事件就是當光標落在文本框中的時候，發生的事件。語法和剛才的 Onclick 事件比較的類似：

請看我們下面的 onfocus 事件：

當我們用鼠標選中一個文本框的時候，觸發 Onfocus 事件，彈出一個對話框。顯示的結果如圖 5-4 所示。

圖 5-4 Onfocus 事件