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

Web前端開發(fā)—交互式設(shè)計(jì)

（JavaScript+jQuery）主編：孫佳帝

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

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

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

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

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

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

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

e.type返回事件的類型e.cancelBubble阻止事件冒泡e.returnValue阻止默認(rèn)事件

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

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

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