JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（第2版）（微課版）第4章

JavaScript+jQuery前端開發(fā)基礎(chǔ)教程微課版第4章異常和事件處理本章主要內(nèi)容：異常處理事件處理4.1異常處理當(dāng)腳本運(yùn)行發(fā)生錯誤時，瀏覽器通常會停止腳本的運(yùn)行，嚴(yán)重的錯誤甚至有可能會導(dǎo)致瀏覽器崩潰。JavaScript利用異常處理來捕獲腳本中發(fā)生的錯誤，以便給用戶及時、友好的提示。4.1.1捕獲和處理異常JavaScript使用try/catch/finally語句來捕獲和處理異常，其基本語法格式如下。try

{

...//可能發(fā)生異常的代碼塊}

catch

(err)

{

...//發(fā)生異常后，執(zhí)行此處的處理代碼塊}

finally

{

...//不管是否發(fā)生異常，均會執(zhí)行的代碼塊}

try部分的花括號中為可能發(fā)生異常的代碼塊。如果發(fā)生了異常，catch語句捕捉到該異常，局部變量err包含了異常信息。finally部分的花括號中為不管是否發(fā)生異常始終都會執(zhí)行的代碼。catch和finally均可省略，但必須有其中的一個才能和try構(gòu)成一個完整的語句finally子句一般很少使用，但其特殊性在于，只要執(zhí)行了try子句，不管完成了多少，finally子句總會執(zhí)行。如果try子句中有break、continue或者return語句，會導(dǎo)致程序流程轉(zhuǎn)移，但會在轉(zhuǎn)移前執(zhí)行finally子句。如果try子句發(fā)生了異常，而且同時有捕捉該異常的catch子句，則程序流程轉(zhuǎn)移到catch子句，catch子句執(zhí)行完后再執(zhí)行finally子句。如果finally子句中有break、continue、return或者throw語句，這些語句會導(dǎo)致程序流程轉(zhuǎn)移。4.1.2拋出異常除了腳本自身發(fā)生的異常外，還可使用throw語句來拋出異常，其語法格式如下。throw

表達(dá)式表達(dá)式的值可以是任意類型，也可以是Error對象或Error子類對象。throw

new

Error('出錯了！')Error()構(gòu)造函數(shù)的參數(shù)將作為拋出的Error對象的message屬性值。4.2事件處理事件驅(qū)動是JavaScript的重要特點。當(dāng)用戶在瀏覽器中執(zhí)行操作時，產(chǎn)生事件，執(zhí)行相應(yīng)的事件處理程序來完成交互——這就是事件驅(qū)動。4.2.1理解事件JavaScript腳本在瀏覽器中的執(zhí)行分兩個階段：文檔載入階段和事件驅(qū)動階段。文檔載入階段指瀏覽器打開一個Web文檔的過程。在這一過程中，非事件處理程序代碼被執(zhí)行。文檔載入完成后，JavaScript腳本進(jìn)入事件驅(qū)動階段。例如，瀏覽器加載完成時，會產(chǎn)生load事件，此時load事件處理程序就會執(zhí)行。當(dāng)用戶單擊了某個按鈕，產(chǎn)生click事件，按鈕的click事件處理程序就會被執(zhí)行。JavaScript事件處理的主要概念包括：事件類型、事件目標(biāo)、事件處理程序、事件對象和事件傳播。1．事件類型事件類型也稱事件名稱，是JavaScript對各類事件的命名，不同事件有其內(nèi)在的處理機(jī)制。例如，click表示鼠標(biāo)單擊，mousemove表示移動鼠標(biāo)。2．事件目標(biāo)事件目標(biāo)指發(fā)生事件的對象。例如，單擊<button>標(biāo)記產(chǎn)生click事件，則<button>標(biāo)記為click事件的目標(biāo)。3．事件處理程序事件處理程序也稱事件監(jiān)聽程序或者事件回調(diào)函數(shù)，它是腳本中用于處理事件的函數(shù)。為了響應(yīng)特定目標(biāo)的事件，首先需要定義事件處理程序，然后進(jìn)行注冊。特定目標(biāo)發(fā)生事件時，瀏覽器調(diào)用事件處理程序。當(dāng)對象上注冊的事件處理程序被調(diào)用時，我們稱瀏覽器“觸發(fā)”或者“分派”了事件。4．事件對象事件對象是與特定事件相關(guān)的對象，它包含了事件的詳細(xì)信息。事件被觸發(fā)時，事件對象作為參數(shù)傳遞給事件處理程序。全局對象event用于引用事件對象。5．事件傳播事件傳播是瀏覽器決定由哪個對象來響應(yīng)事件的過程。如果是專屬于某個特定對象的事件，則不需要傳播。例如，load事件專屬于Window對象，所以不需要傳播；而click事件適用于多數(shù)標(biāo)記，則會在HTML文檔的DOM樹中傳播。事件傳播可分為事件捕獲和事件冒泡兩個過程事件捕獲事件冒泡clickclickclickclickclickclickclickclickclickclick4.2.2注冊事件處理程序事件處理程序的注冊就是建立函數(shù)和對象事件的關(guān)聯(lián)關(guān)系。JavaScript允許通過下列方法來注冊事件處理程序。設(shè)置HTML標(biāo)記屬性。設(shè)置JavaScript對象屬性。調(diào)用addEventListener()方法。1．設(shè)置HTML標(biāo)記屬性注冊事件處理程序早期的Web設(shè)計都通過設(shè)置HTML標(biāo)記屬性來注冊事件處理程序。例4-4中的HTML文檔中的相關(guān)代碼如下。<div><button

onclick="test()">按鈕</button></div>在<button>標(biāo)記的onclick屬性中設(shè)置的函數(shù)，就是為<button>標(biāo)記注冊click事件處理程序。2．設(shè)置JavaScript對象屬性注冊事件處理程序?qū)⒑瘮?shù)設(shè)置為事件目標(biāo)對象的事件屬性值，也可完成事件處理程序的注冊。3．使用addEventListener()方法注冊事件處理程序事件目標(biāo)對象的addEventListener()方法用于注冊事件處理程序。該方法可為事件目標(biāo)對象的同一個事件注冊多個事件處理程序。當(dāng)事件發(fā)生時，為事件注冊的所有處理程序均可執(zhí)行。既然是同一個事件的處理程序，為何要注冊多個事件處理程序，不合并為一個呢？這主要是基于模塊化的程序設(shè)計思想的考慮。當(dāng)發(fā)生事件后，需要處理兩種或多種不太相關(guān)的邏輯時，將其分別用不同的函數(shù)來實現(xiàn)，也利于模塊的獨立性和程序的可維護(hù)性。addEventListener()方法基本語法格式如下。事件目標(biāo)對象.addEventListener('事件名稱',

函數(shù)名稱,

true|false)方法的第1個參數(shù)為事件名稱。第2個參數(shù)為函數(shù)名稱，函數(shù)名稱直接使用，不需要放在字符串中。第3個參數(shù)如果為true，事件處理程序的調(diào)用發(fā)生在事件的捕獲階段，即事件目標(biāo)對象接收到事件時調(diào)用事件處理程序。第3個參數(shù)如果為false，事件直接發(fā)生在事件目標(biāo)對象上，或者發(fā)生在其子對象上，事件冒泡到該對象時，調(diào)用事件處理程序。4.2.3事件處理程序的調(diào)用1．事件處理程序的調(diào)用方式事件處理程序的調(diào)用和函數(shù)的調(diào)用方式一致，只是時機(jī)不同。事件處理程序通常在目標(biāo)對象發(fā)生事件時被調(diào)用，調(diào)用時間是不確定的。也可直接調(diào)用事件處理程序。例如，在例4-5中，完成事件處理程序注冊后，可用下面的語句直接調(diào)用事件處理程序。btTest.onclick()

//直接調(diào)用事件處理程序直接調(diào)用事件處理程序僅等同于調(diào)用函數(shù)，不能和通過事件觸發(fā)事件處理程序等同。2．事件處理程序的參數(shù)事件處理程序被觸發(fā)時，事件對象作為第1個參數(shù)傳遞給事件處理程序。event變量用于在事件處理程序中引用事件對象。直接調(diào)用事件處理程序時，沒有發(fā)生事件，所以沒有事件對象作為參數(shù)。事件對象的主要屬性和方法type屬性：事件類型的名稱，如click、submit等。target屬性：發(fā)生事件的HTML標(biāo)記對象。可能與currentTarget不同。currentTarget屬性：正在執(zhí)行事件處理程序的HTML標(biāo)記對象。如果在事件傳播（捕獲或冒泡）過程中事件被觸發(fā)，currentTarget屬性與target屬性不同。timeStamp屬性：時間戳，表示發(fā)生事件的時間。bubbles屬性：邏輯值，表示事件是否冒泡。cancelable屬性：邏輯值，表示是否能用preventDefault()方法取消對象的默認(rèn)動作。preventDefault()方法：阻止對象的默認(rèn)動作。例如，單擊表單的提交按鈕時，首先會執(zhí)行表單的submit事件處理程序，然后執(zhí)行默認(rèn)動作——將表單提交給服務(wù)器。如果在submit事件處理程序中調(diào)用了事件對象的preventDefault()方法，則會阻止表單提交給服務(wù)器，這與submit事件處理程序返回false的效果一樣。stopPropagation()方法：調(diào)用該方法可阻止事件傳播過程，事件傳播路徑中的后繼節(jié)點不會再接收到該事件。3．事件處理程序的返回值事件處理程序的返回值具有特殊意義。通常，事件處理程序返回false時，會阻止瀏覽器執(zhí)行這個事件的默認(rèn)動作。例如，表單的submit事件處理程序返回false時，會阻止提交表單；單擊鏈接<a>時，會跳轉(zhuǎn)到鏈接的URL，若在其click事件處理程序中返回false，則會阻止跳轉(zhuǎn)。通過HTML標(biāo)記的屬性注冊事件處理程序時，如果要利用事件處理程序返回false以阻止默認(rèn)動作，首先應(yīng)在事件處理程序中使用“returnfalse”語句返回false，然后使用“return事件處理程序名()”的格式設(shè)置屬性來注冊事件處理程序。如果使用“事件處理程序名()”，即使在事件處理程序中使用了“returnfalse”，也不會起到阻止作用。不管是通過設(shè)置屬性，還是通過調(diào)用addEventListener()方法注冊的事件處理程序，在處理程序中調(diào)用preventDefault()方法均可阻止事件默認(rèn)動作。在事件處理程序中，也可通過將event.returnValue屬性設(shè)置為false來阻止事件默認(rèn)動作。4.2.4阻止事件傳播調(diào)用事件對象的stopPropagation()方法可阻止事件的傳播。4.2.5頁面加載與卸載事件瀏覽器在加載完一個頁面時，觸發(fā)load事件。在load事件處理程序中，可對頁面內(nèi)容設(shè)置樣式或執(zhí)行其他操作。在關(guān)閉當(dāng)前頁面或跳轉(zhuǎn)到其他頁面時，首先會觸發(fā)beforeunload事件，可使用對話框確認(rèn)用戶是否跳轉(zhuǎn)。在beforeunload事件處理程序中確認(rèn)了跳轉(zhuǎn)，或者沒有注冊beforeunload事件處理程序，都會進(jìn)一步觸發(fā)unload事件。beforeunload和unload事件處理過程會屏蔽所有用戶交互，window.open、alert、confirm等都無效，不能阻止unload事件。一般在unload事件處理程序中執(zhí)行一些必要的清理操作，事實上只有極少的這種需求。4.2.6鼠標(biāo)事件鼠標(biāo)事件對象除了擁有事件對象的主要屬性外，還有下列常用屬性。button：數(shù)字，在mousedown、mouseup和click等事件中用于表示按下的鼠標(biāo)按鍵，屬性值為0表示左鍵，1表示中鍵（滾輪按鈕），2表示右鍵。altKey、ctrlKey和shiftKey：邏輯值，表示在鼠標(biāo)事件發(fā)生時，是否按下了【Alt】鍵、【Ctrl】鍵或【Shift】鍵。clientX、clientY：表示鼠標(biāo)指針在瀏覽器中當(dāng)前位置的x坐標(biāo)和y坐標(biāo)。screenX、screenY：表示鼠標(biāo)指針在屏幕中當(dāng)前位置的x坐標(biāo)和y坐標(biāo)。relatedTarget：對于mouseover事件，表示鼠標(biāo)指針先前離開的標(biāo)記對象；對于mouseout事件，表示鼠標(biāo)指針要進(jìn)入的標(biāo)記對象。4.2.7鍵盤事件用戶按下鍵盤按鍵時會產(chǎn)生keydown事件，在keydown事件后，還會產(chǎn)生keypress事件，松開按鍵時會產(chǎn)生keyup事件。keypress事件只在按下字符按鍵時才會產(chǎn)生。如果按住按鍵的時間過長，可能會觸發(fā)多個keydown和keypress事件。在鍵