12章對象模型與事件處理JavaScriptJavaScript對象之間的層次關系。另外，JavaScript還可以捕捉到用戶在瀏覽器中的操作，并對不同的操作進行響應，這就是JavaScript的事件驅動與事件處理。對象模型對象模型是用來描述對象的邏輯層次結構以及其標準的操作方法的一個應用程序接口（APIJavaScript中，可以將對象模型分為以下幾個組成部分。部分（Core）：JavaScript的部分主要包括JavaScript的數據類型、運算節中所介紹的都是JavaScript的部分。（rowerObectModelBOM用戶與瀏覽器之間交互的對象以及操作的接口。這些對象中，有很大一部分是與ceenNavaorWideWeb（W3C）所定義的標準文檔對象模型，該模型是一個能夠讓程序或動態地和更新文檔內容、結構和樣式的應用程序接口。DOM的版本可以分為DOM1、DOM2和DOM3。BOM雖然不是W3C中的標準，但是眾多瀏覽器都能實現該對象模型，因此也被稱為0級DOM?？蛻舳藢ο髮訛g覽器的主要作用是顯示一個HTML文檔，在這種情況下，JavaScript使用對象代HTML文檔，使Window對象代表顯示HTML文檔的瀏覽器窗12-1對12-1客戶端對象層在圖12-1中所加載的HTML文件為光盤 里“代碼\第12章\sample01.htm”文件，該文件的內容如代碼12-1所示。請注意加粗的文字。 12-1簡單的客戶端對象層<title>客戶端對象層次<metahttp-equiv="content-type"<!- .write("JavaScript輸出的文字--12-1中可以看出，Window對象是代表瀏覽器窗口的對象，因此該對象是頂層對象。而對象是代表HTML文檔的對象，因此，該對象是Window對象下的子對象。面章節中曾經介紹過，對象的write()方法可以在瀏覽器窗口中輸出文字。因此，完整調用對象的write()方法應該如下： 瀏覽器對象模之間有著層次關系。如Window對象的子對象，Window對象是了獨立于內容的、可以與瀏覽器窗口進行互動的對象結構。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。圖12-2是BOM的結構示意圖。12-2BOM的結構示意12-2中可以看出，WindowBOM中的頂層對象，該對象代表了瀏覽器窗口。在Window對象之下有下述幾個子對象。對象：該對象代表瀏覽器窗口中所加載的文檔。使用對象可以操作文檔中的內容。在整個BOM中，只有對象是與HTML文檔的內Frames數組：該數組代表瀏覽器窗口中的框架。HTML中允許將一個瀏覽器窗口HTML文檔。在這種框架頁中，每一個框架都是Frames數組中的一個元素。而Frames數組中的每一個元素都是一個Window對象。History對象：該對象代表當前瀏覽器窗口的瀏覽歷史。通過該對象可以將當前瀏覽器窗口中的文檔前進或后退到某一個已經過的URL（統一資源定位符）。LocationURL。URL分為幾個部分，如協議部分、Location對象可以分別獲得這些部分，并且可以通Navigator對象：該對象是瀏覽器對象，代表了瀏覽器的信息。該對象與WindowNavigator對象包含的是瀏覽器的信息，如瀏覽器的名稱、版本號等。HTMLHTML文檔中包括了有很多元素，BOM也將這12-2中可以看出，象。每一個錨對象都對應著HTML文檔中的一個包含name屬性的<a>，通過錨Applets數組：該數組代表了嵌在網頁中的所有小程序。數組中的每一個元素都是一個Applet對象，通過Applet對象可以獲得Java小程序的公有字段。FormsForm對象。每一個Form對象都對應著HTML文檔中的一個<form>。通過Form對多表單元素，因此，Form對象的子對象還可以對這些表單元素進行，以完成象。每一個Image對象都對應著HTML文檔中的一個<img>。通過Image對對象。每一個Link對象都對應著HTML文檔中的一個包含href屬性的<a>，通過Link對象可以獲得超中URL的各部分信息。對象的Location子對象。BOMW3CBOM中的對象、對象的屬性和方法都有可能不同。從圖12-2中可以看出，對象下有很多子對象，因此對象是一個十分重要的對象。事實上，大多數瀏覽器都支持對象。在W3C正式定義DOM之前，BOM中的分支就已經被眾多瀏覽器支持。DOM被正式定義之后，分為了三個層1DOM（DOMLevel12DOM（DOMLevel23DO（DOMLevel3BOM中的0DO（DOMLevel對象模型中對象的第二層的對象、History對象、Location對象、Navigator對象和Screenframes[]數組來Form對象的子對象，這些子對象代表了表單中的不同元素。對于這些元素，可以使用相應中的name屬性值，也可以使用elements[] 12-2通過name屬性 <title>通過name屬性 <metahttp-equiv="content-type"<form ：<inputtype="text"<!- -- 如果要該文本框，可以根據BOM的示意圖來獲得其方式，如圖12-4所示。 以上代碼中，使用window來Window對象，使用來對象，使用表單名myForm來Form對象，使用文本框名myName來Text對象。這 圖12-3sample02htm的運行結 圖12-4sample02htm文件的對象示意通過數組下標對12-2BOMForm對象等。對于這種以數組形式出現的對象，可以使用數組下標的方式來該對象。請看代碼12-3，注意加粗的文字。12-3通過數組下 <title>通過數組下 <metahttp-equiv="content-type"<form ：<inputtype="text"請輸入地址：<inputtype="text<!- -- 框。如果要這兩個文本框，可以根據BOM的示意圖來獲得其方式，如圖12-圖12-5sample03htm的運行結 圖12-6sample03.htm文件的對象示意其中，第1行代碼用于第1個文本框，第2行代碼用于第2個文本框。同樣，可以通過Text對象的value屬性來設置文本框中的文本內容。name屬性值和數組下標都可以對象。事實上，這種對象的方式還可以混合使用。例如，第1個對象使用name屬性值的方式，而第2個對象使用數組下標的方式，或者反過來也可以。以代碼12-3為例，在該代碼中，第1個文本框的使用方式如下所示： 在sample02.htm和sample03.htm中，每個對象的，都是從Window對象開始向下一層層的。事實上，在的過程中，并不需要從頂層Window對象開始。其省WindowWindow對象作為頂層對象。因此， 事件驅動是JavaScript響應用戶操作的一種處理方式，而事件處理是JavaScript響應用寫的網頁。瀏覽器只是將HTML代碼逐行解析，并顯示在瀏覽器窗口。以及單擊的方式進行響應。JavaScript使用的就是這種事件驅動的程序設計方式。事件產生的時候，瀏覽器會調用一個JavaScript程序來響應這個事件，這就是JavaScript的事件處理方式。要想讓瀏覽器可以調用合適的JavaScript程序，就必須要做到以下3HTMLHTML文檔中，并非所有元素都會cck事件（cane事件一個超，在鼠標移動到該超上時，可以響應鼠標移動到對象上事件（oueovr事件，當標從超上移時，又以響鼠移開事件（useout事件。JavaScript代碼，還可以是JavaScript內置對象的方法等。在HTML中設置事件驅mousemovekeypressHTML文種事件，如果設置響應事件時應調用什么JavaScript程序呢？添加一個onclick屬性，如果要讓該響應鼠標移動事件，就要在該的<img>中onmousemove屬性。要設置在響應事件時調用的程序，只需在屬性值中輸入函數名即可。如代碼12-4所示，請注意加粗的文字。<title>在<metahttp-equiv="content-type" 12-4在 上述代碼為光盤里“代碼\第12章\sample04.htm”的內容，其運行結果如圖12-7所示。在本例中單擊時，會觸發click事件，瀏覽器會調用alert()方法來響應該12-7sample04htm的運行結在JavaScript代碼中設置事件驅12.2.3小節中可以看出，設置事件驅動事實上就是為元素添加了一個屬性，響應事件的程序實際上就是該屬性的值。通過BOM，可以很方便地在JavaScript代碼中設置元素響應的事件。請看代碼12-5，注意加粗的文字。<title>在JavaScript代碼中設置事件驅動<metahttp-equiv="content-type"<title>在JavaScript代碼中設置事件驅動<metahttp-equiv="content-type"<form"<!-function{alert("您單擊了按鈕}myForm.myButton.onclick=--上述代碼為光盤里“代碼\12章\sample05.htm”的內容。在本例中，創建了一個按鈕，單擊該按鈕時會調用clickButton()函數，并彈出一個警告框。本例的關鍵代碼myForm.myButton.onclick= 這是一個典型的BOM對象方式，myForm代表表單，myButton代表表單中的按鈕，onclick是該按鈕的屬性。需要注意的是，onclick屬性值為“clickButton”，而不是clickButton”。如果為“clickButton(”，則會直接執行clickButton()函數，而不會將clickButton()函數賦值給onclick屬性。JavaScript3種：直接調用內置對象的方法或內置函數、調用用戶自定義的函數、直接調用JavaScript語句。的情況下，才使用這種方法。其具體的使用方法如代碼12-6，請注意加粗的文字。<title>調用內置對象的方法<metahttp-equiv="content-type"<title>調用內置對象的方法<metahttp-equiv="content-type""上述代碼為光盤里“代碼\第12章\sample06.htm”的內容。在本例中創建了一個Windowalert()onclick屬性，這是直接調用內置對象方法的事件12-8sample06htm的運行結具體的使用方法如代碼12-7所示，請注意加粗的文字。<title>直接調用JavaScript代碼<title>直接調用JavaScript代碼<metahttp-equiv="content-type"<form<inputtype="text"name="numberA"+<inputtype="text"name="numberB"<inputtype="text"name="numberSum"<inputtype="buttonvalue="計算onclick="varmySum=0;mySum= 里“代碼\第12章\sample07.htm”的內容。在本例中。創建了12-9sample07htm的運行結在本例中，onclickJavaScript代碼，語句之間使用分號作為分隔符。單擊按鈕時，JavaScriptJavaScript語句。只有在處理事件的語句比JavaScript代碼的方式都比較簡單，如果要實現比較復雜的程序處理，函數。這樣，可以實現更強大的功能。請看代碼12-8，注意加粗的文字。<title>調用用戶函數<metahttp-equiv="content-type"<title>調用用戶函數<metahttp-equiv="content-type"<!-function{varvarnumberA=Number(myForm.numberA.value);varnumberB=if{alert("第1個文本框中輸入的不是數字}elseif{alert("第2個文本框中輸入的不是數字}{}}--<form<inputtype="text"name="numberA"+<inputtype="text"name="numberB"<inputtype="text"name="numberSum"<inputtype="buttonvalue="計算上述代碼為光盤里“代碼\12章\sample08.htm”的內容。從本例中可以看出，在超中使用click事JavaScript中，可以響應的事件有很多種，如單擊事件、雙擊事件等。這些事件也href屬性值所指向的URL。但如果在超中設置了onclick屬性，單擊超時，會響應click事件嗎？另一種是跳轉到href屬性值所指定的URL上。如果在超上同時擁有href屬性和onclick屬性，那會發生什么情況？請看代碼12-9，注意加粗的文字。 12-9在 <title>在 <metahttp-equiv="content-type"<ahref="sample01.htm"onclick="alert('您單擊了超 上述代碼為光盤里“代碼\12章\sample09.htm<a>的href屬性，又設置了<a>的onclick屬性。對于這種情況，JavaScript會先響onclickhrefURL上。因此，在本例中，單擊超時，先彈出一個警告框，如圖12-10所示。只有在單擊了圖12-10中的【確定】按鈕之后，才會執行網頁跳轉程序。12-10sample09htm的運行結雖然大多數瀏覽器在小節的這種超中，當存在onclick屬性時，都會先響處理。請看代碼12-10，注意加粗的文字。 12-10在 <title>在 <metahttp-equiv="content-type"<ahref="sample01.htmonclick="location.href='sample02.htm'">本上述代碼為光盤里“代碼\12章\sample10.htm”的內容。在本例中，onclick屬性值中的“location.href='sample02.htm'BOMLocationhref屬性，clickhrefURL中。因此，JavaScript先響應click事件，加載sample02.htm文件。由于已經加載了sample02.htm，當前文件（sample10.htm）已經不存在，因此，不再加載sample01.htm文件。clicksample02.htmsample02.htm文件之后，再加載sample01.htm文件。IEOperaonclick屬sample01.htmFirefoxNetscape瀏不設置<a>的href屬性，只設置onclick屬性。在這種處理方式下，通常超鏈超上也不會顯示小手的形狀（除非為該超設置了CSS）。因此，用戶很將<>的hrf屬性設置為#置nck屬性。在種處理式下，行nckJaacrpthref下拉滾動條時，可以很明顯地看到跳轉，而這種跳轉往往不是網頁設計者的本意。在沒有為<a>設置onclick屬性時，如果單擊了該超，瀏覽器會加載hrefonclickclick在<a>的href屬性值中添加JavaScript語句之前，必須要先使用“javascript:”語句來href屬性值中的語句為JavaScript語句。否則，瀏覽器會將href屬性值中的JavaScript語句當成是URL進行加載。請看代碼12-11，注意加粗的文字。<title>在 <metahttp-equiv="content-type"<!-for(var{}--<aonclick="alert('您單擊了第二個 ')">第1個 href="javascript:alert('')">第3個 12-11在 12-11sample11htm的運行結第1個超中，沒有設置href屬性，因此，從圖12-11中看起來好像只是一行框，而且單擊警告框中的【確定】按鈕之后，不會跳轉到任何URL上。JavaScript，彈出一個警告框。在單擊警告框中的【確定】按鈕之后，瀏覽第3個超中，直接將JavaScript語句寫在href屬性值中。在單擊該超時，可以執行href屬性值中的JavaScript語句，而且不會有任何跳轉。事件的返JavaScript中并不要求所有的事件都有true，則瀏覽器會采取默認的操作，如果事件的返回值為false，則瀏覽器會默認的操作。actionURL上，這是瀏覽器所默認的操作。在用戶單擊提交按鈕時，將會激發submit事件。如果submit事件返回false，則瀏覽器會默認的操作，即不提交表單數據。請看代碼12-12，注意加粗的文字。 12-12事件的返回<title>事件的返回值<metahttp-equiv="content-type"<!-function{if{alert("請輸 }elseif{alert("請輸 }elseif{alert("alert("請重 }elseif{alert("兩 }{return}return}--<formname="myForm"action="submit.htm"姓密;名：<inputtype="text";碼：<inputtype="password重 ：<inputtype="password"<inputtype="submit" 里“代碼\第12章\sample12.htm”的內容。本例的關鍵知識點如submitsubmit事件時，checkDate()函數來處理該事件。如果checkDate()的返回值為false，則提交操作。否則，將數據提交submithtm12-12在本例中，如果<form>的代碼如下所示，則在單擊提交按鈕時，雖然會執行submit.htmreturn語句獲得事件<formname="myForm"action="submit.htm" 12-12sample12htm的運行結this運算符與參數傳件中使用，可以用來傳遞參數。請看代碼12-13，注意加粗的文字。 12-13this運算符與參數傳<title>this運算符與參數傳遞<metahttp-equiv="content-type"<!-function{if{alert("請輸 }}function{if{alert("請輸 }}--<formname="myForm"：<inputtype="text"name="myName"onblur="checkName：：<inputtype="password"name="myPassword"onblur="上述代碼為光盤里“代碼\12章\sample13.htm”的內容。本例的關鍵知識點如checkName()函數，該函數的參數為一個對象。在該函數中，使用以下語句判斷參數的value屬性值是否為空。如果為空，則彈出一個警告框。ififmyName的文本框。其中，onblur屬性說明當文本checkName()函數。<input<inputtype="text"name="myName"注意：在文本框中單擊鼠標，可以讓文本框得到焦點。所謂“得到焦點”，就以下語句來判斷參數是否為空。如果為空，則彈出一個警告框。如圖12-13所示。ifif12-13sample13htm的運行結使用以下語句創建了一個名為myPassword的文本框。其中，onblur屬性說明當checkPassword()函數。在以下代碼中，checkPassword(this.value)中傳遞給checkPassword()函數的是文本框的值。<input<inputtype="password"name="myPassword"onblur="checkPassword(this.HTML中的事12-1HTML4.01中的 A、AREA、LABEL、INPUTSELECTTEXTAREAINPUT、SELECT、A、AREA、LABEL、INPUTSELECTTEXTAREABODY、INPUT、BODY、12-1HTML4.01中所支持的標準事件。除此之外，大多瀏覽器都富和人性化。常用的其他事件如表12-2所示。12-2常用的其他事 鼠標移動鼠標移動事件包括三種，分別mouseovermouseout和mousemove。其中，mouseover是當鼠標移動到對象之上時所激發的事件，mouseout是當鼠標從對象上移開時所激發的事件，mousemove是鼠標在對象上移動時所激發的事件。有關鼠標移動事件，請看代碼12-<title>鼠標移動事件<metahttp-equiv="content-type"<title>鼠標移動事件<metahttp-equiv="content-type"<!-function{//screenx文本框中顯示鼠標的X軸坐myForm.screenx.value=//screeny文本框中顯示鼠標的Y軸坐myForm.screeny.value=}--<formonmouseout="this.src='img/img01.jpg'"onmousemove="mousemove坐標：<inputtype="textname="screenxsize="5"><input"text"name="screeny"上述代碼為光盤里“代碼\12章\sample14.htm”的內容。在本例的關鍵代碼如使用以下語句添加一個"this.src='img/img01.jpg'"onmousemove="mousemove()">onoueover="his.rc='g/g02.g'"”的意思是，當鼠標放在上，的c屬值改為ig/ig02.jpimg02.jpg來替代當前用img01.jpg來替代當前。mouseover事件與mouseout事件一起使用，可以實現時，調用mousemove()函數。在本例中添加了兩個文本框。ouov()函數的作用，就是在這兩個文本框中1-1412-14sample14htm的運行結在IE瀏覽器和Opera瀏覽器中運行。鼠標點擊鼠標點擊事件一共有四種，分別為：click、dblclick、mousedownmouseup。其中，click事件就是鼠標單擊時所激發的事件。一個完整的單擊事件，是指鼠標左鍵被按下并釋放的過程。Dblclick事件就是鼠標雙擊時所激發的事件。mousedown事件是將鼠標鍵按下ouseup釋放時所激發的事件，該事件也不區分鼠標左右鍵。有關鼠標點擊事件，請看代碼清單1-15<title>鼠標點擊事件<metahttp-equiv="content-type"<title>鼠標點擊事件<metahttp-equiv="content-type""""" 44

第1張中添加了一個click事件，在該 框，如圖12-15所示。12-15sample15htm的運行結第4張中添加了一個mouseup事件，在該上按下并釋放鼠標鍵時，將會keydown、keyup和keypress。其中，keypress事件是按下鍵盤鍵時所激發的事件，此時按keyup3mousedown、<title>鍵盤事件<meta<title>鍵盤事件<metahttp-equiv="content-type"content="text/html;charset=gb2312"<form""上述代碼為光盤里“代碼\12章\sample16.htm”的內容，讀者可以自己運行該1keydown事件。因此，在該文本框中輸入文字時，只要2keyup事件。因此，在該文本框中輸入文字時，按下鍵12-16sample16htm的運行結注意：不同的瀏覽器對鍵盤的這3個事件的處理方法略控制文本框中輸入的文字數。請看代碼12-17，注意加粗的文字。 12-17限制文本框中輸入的字<title>限制文本框中輸入的字數<metahttp-equiv="content-type"<!-function{if{ 不能大于6位TextValue=TextValue.substr(0,6);myForm.PostCode.value=}}--<form上述代碼為光盤里“代碼\12章\sample17.htm”的內容，讀者可以自己運行該67個文字時，將會彈出如圖12-18所示。圖12-17輸入第7個文字時的狀 圖12-18單擊【確定】按鈕之后的狀加載事件與卸載事加載事件（load）與卸載事件（unload）HTML4.01中，只規bodyframesetimg元素和objectbody元素為例，加載事件是指整個文檔在瀏覽器窗口中加載完看代碼12-18，注意加粗的文字。<title>加載事件與卸載事件<metahttp-equiv="content-type"<!- varimgArr=newArray();imgArr[0]="img/img01.jpg";imgArr[1]="img/img02.jpg";imgArr[2]="img/img03.jpg";imgArr[3]=//以下URL是不存在的地imgArr[4]=varnowImg=function{if{nowImg=}//改 的myImg.src=//數組下標自加}--')"<imgsrc="img/img04.jpg"name="myImg"()" 12-18加載事件與卸載事上述代碼為光盤里“代碼\12章\sample18.htm”的內容，讀者可以自己運行該 在添加之后，使用以下語句添加了一個按鈕，當單擊該按鈕時，將激 changImg()函數的作用是從imgArr[]數組中獲得的地址，并賦值給的src屬性以置換。由于每次加載完畢之后都會激發<img>中的load事件，因此，第5個元素值所代表的地址是一個不存在的地址，因此，在顯示該地址所指向的時，的狀態，也就不會激發load事件。得到焦點與失去焦點事HTML4.01a、area、label、input、select、textarea、button元素可以擁有得到焦點到焦點和失去焦點，請看代碼12-19，注意加粗的文字。 12-19得到焦點與失去焦點事<title><title>得到焦點與失去焦點事件<metahttp-equiv="content-type"<!-//清 function{myForm.myName.value=}//function{alert("您一共輸入了"+myForm.myText.value.length+"個字}--<form：<inputname="myName"type="text"onfocus="clearText()" 建議：<textareaname="myText"上述代碼為光盤里“代碼\12章\sample19.htm”的內容，讀者可以自己運行該focusclearText()12-20所示。圖12-19初始狀 圖12-20得到焦點后的狀焦點重新賦給“”文字框，此時“建議”文本框會失去焦點，將會激發blur提交事件與重置事12-20所示。 12-20提交事件與重置事<title>提交事件