Web前端開發(fā)-交互式設計（JavaScript+jQuery） 課件 單元8 DOM事件

Web前端開發(fā)—交互式設計

（JavaScript+jQuery）主編：孫佳帝

孫文江編委：白哲佳張卓2023年電子工業(yè)出版社CONTENTS目錄JavaScript概述01JavaScript語言基礎02JavaScript函數(shù) 03面向?qū)ο缶幊?04JavaScript內(nèi)置對象05BOM編程06DOM編程07DOM事件08利用JQuery編程09設計個性化網(wǎng)站10Web前端開發(fā)—交互式設計08單元8DOM事件

Web前端開發(fā)—交互式設計8.1認識DOM事件1.什么是事件？事件（Event）是文檔或瀏覽器中發(fā)生的特定交互瞬間，是瀏覽器響應用戶交互操作的一種“觸發(fā)—響應”機制，是可以被JavaScript偵測到的行為，是用戶在操作瀏覽器的過程中，由用戶觸發(fā)或由瀏覽器自身觸發(fā)的動作，這些動作包括加載頁面、鼠標點擊、按下鍵盤按鍵、滾動窗口等行為。事件定義了用戶與頁面交互時產(chǎn)生的各種操作，網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā)JavaScript函數(shù)的事件。例如用鼠標點擊按鈕時，會產(chǎn)生一個單擊（click）操作事件。事件不僅可以在用戶與頁面交互過程中產(chǎn)生，瀏覽器自身的一些行為也可以觸發(fā)事件。例如當重新載入一個頁面或卸載一個頁面時，將會發(fā)生UI事件。JavaScript的事件為網(wǎng)頁增添了豐富的交互性，幫助開發(fā)者創(chuàng)建帶有交互效果的頁面。2.事件的組成事件由3部分組成，分別是事件源、事件類型和事件處理程序。其中事件源指觸發(fā)事件的元素，即誰觸發(fā)了事件；事件類型指事件的觸發(fā)方式，即觸發(fā)了什么事件，例如鼠標點擊或鍵盤輸入；事件處理程序指事件觸發(fā)后要執(zhí)行的代碼，即觸發(fā)了事件后要做什么，一般通過一個匿名函數(shù)賦值的方法來完成。執(zhí)行事件需要3個步驟，分別是獲取事件源（元素）、注冊事件（綁定事件）和添加事件處理程序（采取函數(shù)賦值的形式）。參考【訓練8-1】3.事件傳播事件傳播是瀏覽器決定哪個對象觸發(fā)其事件處理程序的過程。DOM（文檔對象模型）結(jié)構(gòu)是一個樹形結(jié)構(gòu)，當一個HTML元素產(chǎn)生一個事件時，該事件會在元素節(jié)點與根節(jié)點之前按特定順序傳播，路徑經(jīng)過的節(jié)點都會收到該事件，該傳播過程被稱為DOM事件流。事件流描述的是從頁面中接收事件的順序。當幾個都具有事件的元素層疊在一起的時候，那么你點擊其中一個元素，并不是只有當前被點擊的元素會觸發(fā)事件，而是層疊在你點擊范圍的所有元素都會觸發(fā)事件。事件順序有兩種類型，分別是事件捕捉和事件冒泡。3.事件傳播1.冒泡型事件（EventBubbling）顧名思義，事件像水中的氣泡一樣往上冒，直到頂端。從DOM樹形結(jié)構(gòu)上理解，就是事件由葉子節(jié)點沿祖先節(jié)點一直向上傳遞直到根節(jié)點；從瀏覽器界面視圖HTML元素排列層次上理解就是事件由具有從屬關系的最確定的目標元素一直傳遞到最不確定的目標元素，冒泡型事件的基本思想是事件按照從最特定的事件目標到最不特定的事件目標的順序逐一觸發(fā)。3.事件傳播從下圖中可以看出，事件從DOM層次結(jié)構(gòu)的最底端往上一層級升。冒泡過程3.事件傳播

2.捕獲型事件（EventCapturing）捕獲型事件與冒泡型事件正好相反，捕獲型事件開始的時候由最不具體的節(jié)點接收，然后逐級向下傳播到最具體的節(jié)點，即從不精確的對象到最精確的對象。如下圖所示。捕獲型事件8.2事件處理程序概述事件處理是指瀏覽器為了響應某個事件而進行的處理過程。事件處理機制可以改變?yōu)g覽器響應用戶操作的標準方法和方式，并改變?yōu)g覽器本身的固定的事件處理模式，這樣就能開發(fā)出具有交互性的網(wǎng)頁，使網(wǎng)頁更具有靈活性。沒有了事件處理，程序就會變得呆板，缺乏靈活性。瀏覽器在程序運行的大部分時間都等待交互事件的發(fā)生，并在事件發(fā)生時，自動調(diào)用事件處理程序，完成事件處理過程。事件處理的過程可以表示為：發(fā)生事件—啟動事件處理程序—事件處理程序做出反應。其中要使事件處理程序能夠啟動，必須讓對象知道觸發(fā)了什么事件，要啟動什么處理程序。產(chǎn)生了事件，我們就要去處理他，接下來學習事件處理程序的三種方法。1.HTML事件處理程序通常對于簡單的事件，不需要編寫大量復雜的代碼，可以直接在HTML標簽中添加事件處理程序。具體方法是在事件觸發(fā)的對應HTML標簽中添加一個進行事件處理的屬性，指定屬性值為該事件的處理程序。該方法的語法格式如下：

<標簽句柄屬性="事件處理程序"[句柄屬性="事件處理程序"]>例如：在<p>標簽中直接添加onclick函數(shù)，代碼如下：

<ponclick="add('p<br>');">點我</p>在HTML中幾乎所有標簽都有onclick方法。另外，還可以在標簽中直接采用JavaScript語句。例如：<ponclick="alert('我被點擊了');">點我</p>2.

DOM0級事件處理程序DOM0級事件處理程序即為指定對象添加事件處理。在JavaScript代碼中，經(jīng)常使用on開頭的事件，為操作的DOM元素對象添加事件與事件處理程序。在JavaScript代碼中設置事件處理程序，需要設置對象的事件屬性，設置事件處理程序，并指定事件屬性為事件處理程序的名稱或代碼。該方法的語法格式如下：<scriptlanguage="javascript">對象.事件=事件處理程序名稱;(事件處理函數(shù)或程序代碼)</script>在上述語法中，對象是指使用getElementById()等方法獲取到的元素節(jié)點?！咎崾尽渴褂迷摲椒ㄔO置事件處理程序的特點在于唯一性，即同一個元素同一個事件只能設置一個處理函數(shù)，最后設置的事件處理程序會覆蓋前面設置的事件處理程序。3.DOM2級事件處理程序DOM2級事件處理程序也是對指定對象添加事件處理程序。為了給同一個DOM對象的同一個事件添加多個事件處理程序，DOM2級事件模型中引入了事件流的概念，可以讓DOM對象通過事件監(jiān)聽的方式實現(xiàn)事件的綁定。DOM定義了兩個方法分別來添加和刪除監(jiān)聽函數(shù)，即addEventListener()和removeEventListener()。這兩個函數(shù)要接收3個參數(shù)，即事件的名稱、要分配的函數(shù)名和是用于冒泡階段還是捕獲階段。第3個參數(shù)若是捕獲階段則為true，否則為false，語法如下：DOM對象.addEventListener("event_name",fnHandler,bCapture);DOM對象.removeEventListener("event_name",fnHandler,bCapture);在上述語法中，參數(shù)event_name指的是DOM對象綁定的事件類型，是由事件名稱設置的，如click。參數(shù)fnHandler指的是事件的處理程序。參數(shù)bCapture通常設置為false，即在冒泡階段完成事件處理。8.3事件對象1.DOM事件屬性標準的DOM中規(guī)定event對象必須作為唯一的參數(shù)傳給事件處理函數(shù)，因此在瀏覽器中訪問事件對象通常將其作為參數(shù)，代碼如下：op.onclick=function(oEvent){……}瀏覽器在獲取了事件對象后就可以通過它的一系列屬性和方法來處理各種具體事件了，例如鼠標事件、鍵盤事件和UI事件。在事件發(fā)生后，事件對象event中不僅包含著與特定事件相關的信息，還會包含一些所有事件都有的屬性。事件對象的常用屬性如表8-1所示。1.DOM事件屬性事件對象的常用屬性屬性描述e

.target返回觸發(fā)事件的對象e.srcElement返回觸發(fā)事件的對象

e.type返回事件的類型e.cancelBubble阻止事件冒泡e.returnValue阻止默認事件

2.DOM事件方法事件對象event中包含一些所有事件都有的方法。事件對象的常用方法如下表所示。方法描述e.stopPropagation()阻止事件冒泡e.preventDefault()阻止默認事件在了解了事件對象常用的屬性和方法后，下面將通過兩種常見的使用場景進行訓練2.DOM事件方法1.阻止默認行為在HTML中，有些元素標簽擁有一些特殊的行為。例如，單擊<a>標簽后，會自動跳轉(zhuǎn)到href屬性指定的URL鏈接。這種行為叫做默認行為。但在實際開發(fā)中，為使程序更加嚴謹，希望當含有默認行為的標簽符合要求后，才能執(zhí)行默認行為，這時，可利用事件對象的preventDefault()方法，禁止所有瀏覽器執(zhí)行元素的默認行為。2.阻止事件冒泡如果想要阻止事件冒泡，則可以利用事件對象調(diào)用e.stopPropagation()方法和設置cancelBubble屬性，實現(xiàn)禁止所有瀏覽器的事件冒泡行為。8.4事件類型概述事件類型是說明發(fā)生何種事件的字符串，也稱為事件名稱。例如，click表示鼠標單擊，mousemove表示移動鼠標。常用事件如下表所示。事件名稱觸發(fā)條件load

文檔載入unload文檔卸載change元素改變submit表單被提交reset表單被重置select文本被選取blur標記失去焦點focus標記獲得焦點keydown鍵盤被按下keypress鍵盤被按下后又松開keyup鍵盤被松開click鼠標被單擊dblclick鼠標被雙擊mousedown鼠標按鈕

被按下mousemove鼠標移動mouseout鼠標移出標記mouseover鼠標懸停于標記上mouseup鼠標被松開1.UI事件UI事件load是最常用的事件之一，load事件是當瀏覽器加載頁面時觸發(fā)的，它的事件處理程序可以在其他所有網(wǎng)頁代碼和JavaScript程序之前被執(zhí)行，通常用來完成網(wǎng)頁的初始化操作，比如彈出提示窗口、顯示歡迎信息或密碼認證等。給window對象分配load、unload事件等同于<body>標記的onload、onunload方法，即：<scriptlanguage="javascript">window.onload=function(){alert("PageLoaded.");}</script>等同于：<bodyonload="alert('PageLoaded.');">參考【訓練8-7】1.UI事件Unload事件與load事件正好相反，發(fā)生在頁面卸載的時候，使用頻率不高，但一些電子商務的網(wǎng)站在用戶關閉窗口后彈出對話框表示感謝、歡迎再次光臨等效果，就是采用unload事件實現(xiàn)的。參考【訓練8-8】2.焦點事件用戶可以通過點擊鼠標或按鍵盤上的Tab鍵，使控件獲得焦點。當光標進入控件（按鈕、文本框、選擇框等）時，即當控件變?yōu)椴僮髂繕藭r，將觸發(fā)focus事件?？衫肑avaScript代碼將焦點定位到控件上，代碼如下：<formname=fm><inputtype=textname=tx></form><scriptlanguage="javascript">document.fm.tx.focus();</script>上述代碼中的document.fm.tx.focus()語句表示將焦點放置在表單中的文本框中。參考【訓練8-9】2.焦點事件blur事件與focus事件完全相反，當文字插入點或鼠標指針移離表單中的控件時，控件將會失去焦點從而觸發(fā)blur事件。參考【訓練8-10】3.鼠標事件鼠標事件是響應用戶鼠標動作的事件，這些動作包括鼠標的單擊、鼠標的按下和放開、鼠標的移動、鼠標的移入和移出等。click事件是由鼠標在一個控件上單擊引發(fā)的，該事件主要由mousedown和mouseup事件組成，該事件主要應用于button、checkbox、link、radio、reset、submit等控件。參考【訓練8-11】、【訓練8-12】4.滾輪事件當用戶通過鼠標滾輪與頁面交互、在垂直方向上滾動頁面時（無論向上還是向下），就會觸發(fā)mousewheel事件。與mousewheel事件對應的event對象除包含鼠標事件的所有標準信息外，還包含一個特殊的屬性，即傳遞給mousewheel處理程序的事件對象有wheelDelta屬性，其指定用戶滾動滾輪的值。當用戶向前滾動鼠標滾輪時，wheelDelta是正數(shù)，即120的倍數(shù)；當用戶向后滾動鼠標滾輪時，wheelDelta是復數(shù)，即-120的倍數(shù)。將DOMMouseScroll事件添加到頁面中的任何元素，使這個事件可以在任何元素上觸發(fā)，最終該事件會冒泡到document或window對象。參考【訓練8-13】5.輸入事件（1）submit事件是在<form>標簽中聲明，通常在表單中會有一個submit按鈕，當用戶完成信息輸入，準備將信息提交給服務器時觸發(fā)該事件。參考【訓練8-14】（2）reset事件通常也在<form>標簽中聲明，它會關聯(lián)到表單中的reset按鈕，當用戶在表單中完成信息輸入后，若單擊reset按鈕，將觸發(fā)reset事件，會清除表單中所有控件中已經(jīng)輸入的信息，便于用戶重新輸入。參考【訓練8-15】6.鍵盤事件鍵盤事件是響應用戶的鍵盤輸入的事件，要求頁面內(nèi)必須有可被激活的控件。Keydown事件是當鍵盤上某個按鍵被按下時觸發(fā)的，可用于瀏覽器的窗體、圖像、超鏈接和文本區(qū)域等控件。參考【訓練8-16】【案例8-1】實現(xiàn)電子書城網(wǎng)站首頁【案例分析】電子書城網(wǎng)站首頁由頂部導航欄、tab選項卡、下拉菜單、搜索框