五
、
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
程序都會用到單擊事件。語法非常的簡單：
請看下面的案例：
案例名稱：單擊事件
程序：
5-1.htm
?
<html>
<body>
<form>
<Input type="button" Value="
鼠標響應
" onClick=alert("
這是一個例子
")>
</form>
</body>
</html>
當鼠標單擊按鈕的時候，自動彈出一個
alert
對話框，顯示的結果如圖
5-1
所示。
?
圖
5-1
單擊事件
5.2.2
onchange
事件
所謂的
onchange
事件就是當文本框的內容改變的時候，發生的事件。語法和剛才的
Onclick
事件比較的類似：
請看我們下面的
onchange
事件：
案例名稱：
onchange
事件
程序：
5-13.htm
?
<html>
<body>
<form>
<Input type="text" name="Test" value="Test" onChange=alert("TextBox
值發生了變化！
")>
</form>
</body>
</html>
當文本框的內容發生改變的時候，就回自動彈出一個
Alert
框，顯示的結果如圖
5-2
所示。
圖
5-2 onchange
事件
5.2.3
onselect
事件
所謂的
onselect
事件就是當文本框的內容被選中的時候，發生的事件。語法和剛才的
Onclick
事件比較的類似：
請看我們下面的
onselect
事件：
案例名稱：
onselect
事件
程序：
5-2.htm
?
<html>
<body>
<form>
<Input type="text" name="Test" value="Test" onSelect=alert("
我被選中了！
")>
</form>
</body>
</html>
當文本框中內容被選中的時候就會自動彈出對話框，顯示的結果如圖
5-3
所示。
圖
5-3
onselect
事件
可以看出當文本框的內容
test
被選中的時候，
onselect
事件就被觸發了。
5.2.4
onfocus
事件
所謂的
onfocus
事件就是當光標落在文本框中的時候，發生的事件。語法和剛才的
Onclick
事件比較的類似：
請看我們下面的
onfocus
事件：
案例名稱：
onfocus
事件
程序：
5-3.htm
?
<html>
<body>
<form>
<Input type="text" name="Test1" value="Test1" onFocus=alert("Test1
成為了輸入焦點！
")>
<br>
<Input type="text" name="Test2" value="Test2" onFocus=alert("Test2
成為了輸入焦點！
")>
</form>
</body>
</html>
當我們用鼠標選中一個文本框的時候，觸發
Onfocus
事件，彈出一個對話框。顯示的結果如圖
5-4
所示。
圖
5-4 Onfocus
事件