五、JavaScript事件和對象

1、五、JavaScript事件和對象目標：應掌握以下內(nèi)容：?理解事件驅(qū)動機制?會使用常用的事件觸發(fā)機制，如：Click、On Cha nge等事件關鍵知識點：?會使用常用的事件觸發(fā)機制，如：Click、On Cha nge等事件?常用對象處理語句：this、forin、with和new。? JavaScript內(nèi)置對象：時間對象，Math對象、String對象和數(shù)組對象?JavaScript常用函數(shù)5.1事件的概念HTML規(guī)范中常用的標記非常簡單，這是HTML語言的一個特點，但同時也是它的功能受到很大的限制。事件是瀏覽器相應用戶交互操作的一種機制。當然，任何程序包括 瀏覽器本身都有一套已經(jīng)設計好

2、的相應各種事件的方法。JavaScript的事件處理機制就可以改變?yōu)g覽器響應用戶操作的標準方法，這樣就可以開發(fā)出更加具有交互性，更容易使用 的Web頁面。為什么要利用JavaScript的事件呢？主要有下面的兩個用途：1.驗證用戶輸入窗體的數(shù)據(jù)。2 增加頁面的動感效果。一個利用JavaScript實現(xiàn)交互功能的 WEB網(wǎng)頁總是擁有三個部分的內(nèi)容：在Head部分定義一些 JavaScript函數(shù)，其中的一些可能是事件處理函數(shù)，另外一些可能是為了配合這些事件處理函數(shù)而編寫的普通函數(shù)。HTML本身的各種控制標記。擁有句柄屬性的 HTML標記，主要涉及到一些界面元素。這些元素可以把 HTML 同Jav

3、aScript代碼相連。為了理解JavaScript的事件處理模型，可以設想一下在一個WEB頁面可能會遇到怎樣的用戶相應。歸納起來，必須使用的事件主要有三大類：一類是引起頁面之間跳轉(zhuǎn)的事件，主要是超級連接事件。再一類是瀏覽器自己引起的 事件，例如網(wǎng)頁的裝載，表單的提交等等。另一類事件是在表單內(nèi)部同界面對象的交互， 包括界面對象的選定、改變等?？梢园凑諔贸绦虻木唧w功能自由設計。5.2 JAVASCRIPT 事件驅(qū)動JavaScript事件主要包括三大類的事件：超級連接的事件，瀏覽器的事件和界面事件。超級連接事件包括：Click， MouseOut， MouseOver， MouseDown，M

4、ouseUp 事件。瀏覽器事件主要包括：各種元素Load, Unioad等等。下面我們主要介紹一些常用的事件的處理。5.2.1單擊事件鼠標單擊事件是最最常見得事件，我們只要寫JavaScript程序都會用到單擊事件。語法非常的簡單：onclick=函數(shù)或是處理語句請看下面的案例：案例名稱：單擊事件程序：5-1.htmvform當鼠標單擊按鈕的時候，自動彈出一個alert對話框，顯示的結果如圖5-1所示。圖5-1單擊事件5.2.2 onchan ge事 件所謂的onchange事件就是當文本框的內(nèi)容改變的時候，發(fā)生的事件。語法和剛才的On click事件比較的類似：onchange=理函數(shù)或是處

5、理語句請看我們下面的onchange事件：案例名稱：onchange事件程序：5-13.htmvformvlnput type=text name=Test value=Test onChange=alert（TextBox 值發(fā)生了變化?。〢lert框，顯示的結果如圖5-2當文本框的內(nèi)容發(fā)生改變的時候，就回自動彈出一個 所示。圖 5-2 onchange 事件5.2.3 on select事 件所謂的on select事件就是當文本框的內(nèi)容被選中的時候，發(fā)生的事件。語法和剛才的On click事件比較的類似：onselect=理函數(shù)或是處理語句請看我們下面的on select事件：案例名稱：

6、on select事件程序：5-2.htmvformvlnput type=text name=Test value=Test onSelect=alert（ 我被選中了！）5-3所示。當文本框中內(nèi)容被選中的時候就會自動彈出對話框，顯示的結果如圖圖 5-3 on select 事件可以看出當文本框的內(nèi)容test被選中的時候，on select事件就被觸發(fā)了。5.2.4 on focus 事件所謂的on focus事件就是當光標落在文本框中的時候，發(fā)生的事件。語法和剛才的On click事件比較的類似：onfocus=處理函數(shù)或是處理語句請看我們下面的on focus事件：案例名稱：on focus事件程序：5-3.htmInput type=text name=Test1 value=Test1 onFocus=alert（Test1 成為了 輸入焦點！ ”）Input type=text name=Test2 value=Test