第8章 對象模型及事件處理

高等學校規(guī)劃教材Web前端開發(fā)實例教程（第2版）——HTML5+CSS3+JavaScript+jQuery第8章對象模型及事件處理目錄8.1BOM和DOM8.2window對象8.3document對象8.4location對象

8.5history對象8.6navigator對象8.7screen對象8.8form對象8.9DOM節(jié)點8.10JavaScript的對象事件處理程序8.11綜合案例8.1BOM和DOM8.1.1BOM8.1.2DOM8.1.1BOM BOM是BrowserObjectModel（瀏覽器對象模型）的縮寫，該模型由一組瀏覽器對象組成，如圖8-1所示。8.1.2DOM DOM（DocumentObjectModel，文件對象模型）屬于BOM的一部分，用于對BOM中的核心對象document進行操作。HTML文件中的DOM結構如圖8-2所示。8.2window對象8.2.1window對象的屬性8.2.2window對象的方法8.2.1window對象的屬性 window對象的屬性如表8-1所示。8.2.2window對象的方法 window對象還提供了一些其他方法，如表8-2所示。8.2.2window對象的方法 【例8-1】顯示窗口的寬、高和設置計時器，頁面初次加載時依次顯示兩個提示框，延時5000ms后再調用hello()，顯示歡迎信息的對話框。8.3document對象8.3.1document對象的屬性8.3.2document對象的方法8.3.1document對象的屬性 document對象的屬性如表8-3所示。8.3.2document對象的方法 document對象的方法如表8-4所示。8.3.2document對象的方法 【例8-2】使用getElementById()、getElementsByName()、getElementsByTagName()方法操作文件中的元素。瀏覽者填寫表單中的選項后，單擊“統(tǒng)計結果”按鈕，彈出消息框顯示統(tǒng)計結果。8.4location對象8.4.1location對象的屬性8.4.2location對象的方法8.4.1location對象的屬性 location對象的屬性如表8-5所示。8.4.2location對象的方法 location對象提供了以下3種方法，用于加載或重新加載頁面中的內容，location對象的方法如表8-6所示。8.5history對象8.5history對象 history對象提供了back()、forward()和go()方法來實現針對歷史訪問的前進與后退功能，如表8-7所示。8.6navigator對象8.6navigator對象 navigator對象中包含瀏覽器的相關信息，如瀏覽器名稱、版本號和脫機狀態(tài)等。navigator對象的屬性如表8-8所示。8.7screen對象8.7screen對象 每個window對象的screen屬性都引用一個screen對象，screen對象中存放著有關客戶端顯示屏幕的信息，包括瀏覽器屏幕的信息與顯示器屏幕的信息。screen對象的屬性如表8-9所示。8.8form對象8.8.1form對象的屬性8.8.2form對象的方法8.8.1form對象的屬性 form對象的屬性如表8-10所示。8.8.2form對象的方法

form對象的方法如表8-11所示。8.9DOM節(jié)點8.9.1Node對象8.9.2Element對象8.9.3NodeList對象8.9.1Node對象

Node對象的屬性用于獲得該節(jié)點的類型，如表8-12所示。8.9.2Element對象

Element對象繼承了Node對象，是Node對象中的一種，常用的屬性如表8-13所示。8.9.3NodeList對象

NodeList對象是一個節(jié)點集合，其item(index)方法用于從節(jié)點集合中返回指定索引的節(jié)點，length屬性用于返回節(jié)點數量?！纠?-3】DOM節(jié)點示例。8.10JavaScript的對象事件處理程序8.10.1對象的事件8.10.2常用的事件及處理8.10.3表單對象與交互性8.10.1對象的事件

事件（Event）是文件對象模型（DOM）的一部分，每個HTML元素都包含一組可以觸發(fā)JavaScript代碼的事件，但并非每種事件都會產生結果，因為JavaScript只是識別事件的發(fā)生。為了使對象能夠對某一事件做出響應，就必須編寫事件處理函數。

對象事件有以下3類。用戶引起的事件，如網頁裝載、表單提交等。引起頁面之間跳轉的事件，主要是超鏈接。表單內部與界面對象的交互，包括界面對象的改變等。這類事件可以按照應用程序的具體功能自由設計。8.10.2常用的事件及處理

1．瀏覽器事件

瀏覽器事件主要由Load、UnLoad、DragDrop及Submit等事件組成?！纠?-4】本例是一個在提交時檢查條件是否滿足要求的程序。8.10.2常用的事件及處理

2．鼠標事件

常用的鼠標事件有MouseDown、MouseMove、MouseUp、MouseOver、MouseOut、Click、Blur及Focus等事件。

3．鍵盤事件

常用的鍵盤有事件KeyDown事件、KeyPress事件、KeyUp事件、Change事件、Select事件、Select事件和Resize事件。8.10.3表單對象與交互性

表單事件最常用在form元素中，調用form對象一般格式為：<formname="表單名"action="URL"表單事件="JavaScript代碼"method="post">…><inputtype="表項類型"name="表項名"value="默認值"事件="JavaScript代碼"…>…</form>8.10.3表單對象與交互性

【例8-5】本例中，窗體myForm包含了一個text對象和一個按鈕。當用戶單擊button1按鈕時，窗體的名字就將賦給text對象；當用戶單擊button2按鈕時，函數showElements將顯示一個警告對話框，里面包含了窗體myForm上的每個元素的名稱。8.11綜合案例8.11綜合案例

【例8-6】使用JavaScript實現商品復選框的全選效果。當用戶單擊“全選”復選框時，所有商品前面的復選框都被選中；再次單擊“全選”復選框，所有商品前面的復選框都被取消選中。習題81．編寫程序實現按時間隨機變化的網頁背景，如圖8-10所示。2．使用window對象的setTimeout()方法和clearTimeout()方法設計一個簡單的計時器。當單擊“開始計時”按鈕后啟動計時器，文本框從0開始計時；單擊“暫停計時”按鈕后暫停計時，如圖8-11所示。3．編寫程序實現年月日的聯動功能，當改變“年”“月”菜單的值時，