《web前端技術(shù)》課件-第十二章

Web前端技術(shù)簽到掃碼下載文旌課堂APP掃碼簽到簽到方式教師通過(guò)“文旌課堂APP”生成簽到二維碼，并設(shè)置簽到時(shí)間，學(xué)生通過(guò)“文旌課堂APP”掃描“簽到二維碼”進(jìn)行簽到。事件第十二章事件是指用戶的各種操作，如用戶單擊鼠標(biāo)、滾動(dòng)滾輪向下滑動(dòng)網(wǎng)頁(yè)等，它可以說(shuō)是用戶和網(wǎng)頁(yè)交互的橋梁。JavaScript通過(guò)監(jiān)聽用戶觸發(fā)的這些事件，執(zhí)行對(duì)應(yīng)的程序，從而實(shí)現(xiàn)用戶與網(wǎng)頁(yè)間的交互，如跳轉(zhuǎn)到對(duì)應(yīng)網(wǎng)頁(yè)、彈出提示框等。本章將對(duì)事件的相關(guān)知識(shí)進(jìn)行詳細(xì)介紹。章節(jié)導(dǎo)讀熟悉事件與事件流，掌握事件綁定方式和事件對(duì)象的常用屬性和方法。熟悉常見的事件類型，包括鼠標(biāo)事件、鍵盤事件、焦點(diǎn)事件和頁(yè)面事件。了解事件優(yōu)化方式，包括事件委托和事件刪除。學(xué)習(xí)目標(biāo)學(xué)習(xí)事件的相關(guān)知識(shí)，增強(qiáng)探索意識(shí)，培養(yǎng)鉆研精神。參與實(shí)戰(zhàn)演練，加強(qiáng)專業(yè)技能，提升實(shí)踐能力。素質(zhì)目標(biāo)第十二章事件/章節(jié)導(dǎo)航/12.1事件概述12.2事件綁定12.3事件對(duì)象12.4

常見事件類型12.5

事件優(yōu)化實(shí)戰(zhàn)演練——制作“金企鵝教育”主頁(yè)的輪播圖

事件概述12.1事件可以理解為JavaScript監(jiān)測(cè)到的瀏覽器行為或用戶行為，這些行為包括頁(yè)面加載、鼠標(biāo)單擊某個(gè)按鈕、鼠標(biāo)滑過(guò)某區(qū)域等。當(dāng)JavaScript監(jiān)測(cè)到這些行為時(shí)，它會(huì)執(zhí)行一段程序來(lái)做出響應(yīng)，這就實(shí)現(xiàn)了用戶與網(wǎng)頁(yè)的交互。12.1.1認(rèn)識(shí)事件12.1事件概述在JavaScript中，程序?qū)κ录龀龅捻憫?yīng)稱為事件處理，其中涉及的程序代碼稱為事件處理程序。例如，當(dāng)用戶在網(wǎng)頁(yè)中單擊某個(gè)按鈕時(shí)，這個(gè)行為就會(huì)被JavaScript中的click事件監(jiān)測(cè)到，然后JavaScript會(huì)自動(dòng)執(zhí)行為click事件編寫的程序代碼（事件處理程序），從而進(jìn)行事件處理，實(shí)現(xiàn)用戶與網(wǎng)頁(yè)的交互，如單擊按鈕打開提示框等。12.1.1認(rèn)識(shí)事件12.1事件概述超鏈接自IE3和NetscapeNavigator2瀏覽器開始支持事件之后，由于當(dāng)時(shí)沒(méi)有統(tǒng)一的事件標(biāo)準(zhǔn)，各瀏覽器都是按照自己的方式去實(shí)現(xiàn)瀏覽器事件，所以各瀏覽器需要監(jiān)聽的事件名稱或監(jiān)聽事件的方式都有所不同。在制定DOM2規(guī)范時(shí)，包含了對(duì)事件標(biāo)準(zhǔn)化規(guī)范的定義，此時(shí)瀏覽器事件才算擁有了一個(gè)較為統(tǒng)一的標(biāo)準(zhǔn)。目前大部分瀏覽器，如Chrome、Safari、Firefox等，都支持DOM2級(jí)事件的核心部分，但I(xiàn)E9之前的IE瀏覽器依然使用自己的事件標(biāo)準(zhǔn)，所以當(dāng)開發(fā)者需要兼容IE8及更低版本的瀏覽器時(shí)，需要做好瀏覽器環(huán)境的兼容處理。TUOZHANYUEDU拓展閱讀12.1事件概述假設(shè)頁(yè)面上存在3個(gè)div元素，div1是div2的父元素，div2是div3的父元素，當(dāng)用戶單擊div3元素時(shí)，到底哪些元素應(yīng)該觸發(fā)這一單擊事件呢？?jī)H僅是div3元素觸發(fā)單擊事件，還是包含div3元素的所有父元素都觸發(fā)該單擊事件呢？12.1.2

事件流12.1事件概述想一想對(duì)于上述問(wèn)題，IE瀏覽器團(tuán)隊(duì)和Netscape瀏覽器團(tuán)隊(duì)有著一致的看法，那就是當(dāng)div3元素被單擊時(shí)，它和它所有的父級(jí)元素都應(yīng)該觸發(fā)該單擊事件。也就是說(shuō)，當(dāng)一個(gè)HTML元素產(chǎn)生一個(gè)事件時(shí)，該事件會(huì)沿元素節(jié)點(diǎn)與根節(jié)點(diǎn)之間的路徑傳播，路徑所經(jīng)過(guò)的節(jié)點(diǎn)都會(huì)收到該事件，這個(gè)傳播過(guò)程就稱為事件流。IE瀏覽器團(tuán)隊(duì)和Netscape瀏覽器團(tuán)隊(duì)針對(duì)瀏覽器事件定義了兩種完全相反的瀏覽器事件流。IE瀏覽器的事件流是事件冒泡，而Netscape瀏覽器的事件流是事件捕獲。12.1.2

事件流12.1事件概述

事件冒泡是指事件流傳播的順序是從最內(nèi)層元素（發(fā)生事件的元素節(jié)點(diǎn)）開始到最外層元素（DOM樹的根節(jié)點(diǎn)）逐層觸發(fā)，如圖所示。

事件捕獲和事件冒泡的事件流順序相反，它是指事件流傳播的順序是從最外層元素開始到最內(nèi)層元素逐層觸發(fā)，如圖所示。12.1.2

事件流12.1事件概述事件冒泡事件捕獲

支持事件流的瀏覽器越來(lái)越多，為了規(guī)范各瀏覽器對(duì)事件流的支持，W3C制定了DOM事件流規(guī)范。DOM事件流共分為3個(gè)階段，分別是捕獲階段、目標(biāo)階段和冒泡階段，它綜合了IE瀏覽器和Netscape瀏覽器的事件流規(guī)則，如圖所示。12.1.2

事件流12.1事件概述DOM事件流在DOM事件流規(guī)范中，事件發(fā)生后首先實(shí)現(xiàn)事件捕獲，但不對(duì)事件進(jìn)行處理；然后進(jìn)行到目標(biāo)階段，定位目標(biāo)后執(zhí)行當(dāng)前元素對(duì)象的事件處理程序，但這一步通常被看成是冒泡階段的一部分；最后實(shí)現(xiàn)數(shù)據(jù)冒泡，逐級(jí)對(duì)事件進(jìn)行處理。12.1事件概述大部分現(xiàn)代瀏覽器都支持DOM事件流，如Chrome、Safari、FireFox等。老版本的IE瀏覽器（IE8及以下）不支持DOM事件流。TISHI提示12.1事件概述

事件綁定12.2事件綁定是指為某個(gè)元素對(duì)象的事件綁定事件處理程序。JavaScript提供了3種事件綁定方式，分別為內(nèi)聯(lián)綁定、動(dòng)態(tài)綁定和事件監(jiān)聽。12.2事件綁定內(nèi)聯(lián)綁定是指使用HTML標(biāo)簽的事件屬性綁定事件，即在HTML標(biāo)簽元素上新增一個(gè)事件屬性綁定事件處理程序，語(yǔ)法格式如下：其中，標(biāo)簽可以是任意HTML標(biāo)簽，如<div>標(biāo)簽、<a>標(biāo)簽等；事件由“on”和事件名稱組成，如鼠標(biāo)單擊事件onclick、網(wǎng)頁(yè)加載事件onload等；事件處理程序可以是使用一系列分號(hào)分隔的JavaScript代碼或函數(shù)調(diào)用。12.212.2.1內(nèi)聯(lián)綁定事件綁定<標(biāo)簽事件="事件處理程序">……</標(biāo)簽><!--事件處理程序是使用分號(hào)分隔的JavaScript代碼--><buttononclick="alert('內(nèi)聯(lián)綁定1');">按鈕1</button><!--事件處理程序是函數(shù)調(diào)用--><buttononclick="buttonOut()">按鈕2</button><script> functionbuttonOut(){//定義事件處理函數(shù) alert('內(nèi)聯(lián)綁定2'); }</script>【例12-1】

使用內(nèi)聯(lián)綁定方式實(shí)現(xiàn)按鈕單擊事件（以下提供部分代碼）。12.2事件綁定【例12-1】頁(yè)面效果如圖所示。使用內(nèi)聯(lián)綁定方式實(shí)現(xiàn)按鈕單擊事件12.2事件綁定實(shí)際開發(fā)中提倡將JavaScript代碼與HTML代碼分離，因此建議盡量避免使用內(nèi)聯(lián)綁定方式。TISHI提示動(dòng)態(tài)綁定是指使用元素對(duì)象的事件屬性綁定事件，即在JavaScript代碼中獲取標(biāo)簽元素，然后利用標(biāo)簽元素的事件屬性綁定事件處理程序，語(yǔ)法格式如下：其中，標(biāo)簽元素可以通過(guò)document.getElementById()方法獲??；事件由“on”和事件名稱組成。12.212.2.2動(dòng)態(tài)綁定事件綁定標(biāo)簽元素.事件=事件處理程序;<buttonid="hello">按鈕</button><script> //通過(guò)id屬性hello獲取元素button varb=document.getElementById('hello'); b.onclick=function(){//動(dòng)態(tài)綁定 alert('動(dòng)態(tài)綁定');}</script>【例12-2】

使用動(dòng)態(tài)綁定方式實(shí)現(xiàn)按鈕單擊事件（以下提供部分代碼），頁(yè)面效果如圖所示。12.2事件綁定使用動(dòng)態(tài)綁定方式實(shí)現(xiàn)按鈕單擊事件事件監(jiān)聽是指利用DOM對(duì)象的事件監(jiān)聽方法綁定事件，即在JavaScript代碼中獲取標(biāo)簽元素，然后使用該標(biāo)簽元素調(diào)用addEventListener()方法綁定事件處理程序，語(yǔ)法格式如下：其中，標(biāo)簽元素可以通過(guò)document.getElementById()方法獲取。addEventListener()的參數(shù)event是必選的，用于指定事件名稱，如click、focus等；參數(shù)function也是必選的，用于指定事件觸發(fā)時(shí)執(zhí)行的函數(shù)；參數(shù)useCapture是可選的，用于指定事件是否在冒泡或捕獲階段執(zhí)行，它是一個(gè)Boolean類型的值，false是默認(rèn)值，表示事件在冒泡階段執(zhí)行，true表示事件在捕獲階段執(zhí)行。12.212.2.3事件監(jiān)聽事件綁定標(biāo)簽元素.addEventListener(event,function[,useCapture]);<buttonid="hello1">按鈕1</button><buttonid="hello2">按鈕2</button><script> vara=document.getElementById('hello1'); varb=document.getElementById('hello2'); //事件監(jiān)聽1，事件處理程序直接使用函數(shù)定義 a.addEventListener('click',function(){ alert('事件監(jiān)聽1'); },false); functionbuttonOut(){//定義事件處理函數(shù) alert('事件監(jiān)聽2'); } //事件監(jiān)聽2，事件處理程序使用函數(shù)調(diào)用語(yǔ)句 b.addEventListener('click',buttonOut,false);</script>【例12-3】

使用事件監(jiān)聽方式實(shí)現(xiàn)按鈕單擊事件（以下提供部分代碼）。12.2事件綁定【例12-3】頁(yè)面效果如圖所示。12.2事件綁定使用事件監(jiān)聽方式實(shí)現(xiàn)按鈕單擊事件超鏈接addEventListener()方法是DOM2級(jí)事件中的標(biāo)準(zhǔn)定義，在IE8及以下版本的IE瀏覽器中需要使用另一個(gè)函數(shù)attachEvent()進(jìn)行事件監(jiān)聽，語(yǔ)法格式如下：和addEventListener()方法相比，attachEvent()方法僅少了一個(gè)參數(shù)useCapture，其他用法一致。此外，在IE8及以下版本的IE瀏覽器中，使用attachEvent()方法對(duì)同一個(gè)元素進(jìn)行多次事件監(jiān)聽時(shí)，函數(shù)執(zhí)行的順序是從最后一個(gè)監(jiān)聽事件開始到第一個(gè)監(jiān)聽事件結(jié)束，這和addEventListener()方法的執(zhí)行順序相反。TUOZHANYUEDU拓展閱讀標(biāo)簽元素.attachEvent(event,function);12.2事件綁定內(nèi)聯(lián)綁定、動(dòng)態(tài)綁定與事件監(jiān)聽之間最大的區(qū)別在于，使用前面兩種方式時(shí)，同一個(gè)標(biāo)簽元素的同一個(gè)事件只能有一個(gè)事件處理程序；而使用最后一種方式時(shí)，同一個(gè)標(biāo)簽元素的同一個(gè)事件可以有多個(gè)事件處理函數(shù)，且當(dāng)標(biāo)簽元素觸發(fā)事件時(shí)，所有該事件類型綁定的事件處理程序會(huì)按照綁定順序依次調(diào)用執(zhí)行。12.212.2.3事件監(jiān)聽事件綁定

事件對(duì)象12.3當(dāng)事件觸發(fā)時(shí)，都會(huì)產(chǎn)生一個(gè)事件對(duì)象，事件對(duì)象中包含了所有與事件相關(guān)的信息，如事件類型、事件觸發(fā)的位置、事件觸發(fā)的順序、目標(biāo)元素等。JavaScript會(huì)把產(chǎn)生的事件對(duì)象（event）作為參數(shù)傳遞給事件處理程序，因此開發(fā)人員可以在事件處理程序中通過(guò)event獲取事件的相關(guān)信息。事件對(duì)象中包含了許多與事件相關(guān)的屬性和方法，通過(guò)這些屬性和方法可以獲取事件的相關(guān)信息。12.3事件對(duì)象12.3事件對(duì)象類型名稱描述屬性type返回當(dāng)前事件名稱target返回觸發(fā)當(dāng)前事件的目標(biāo)元素currentTarget返回響應(yīng)當(dāng)前事件的元素bubbles該事件是否可以冒泡，返回一個(gè)布爾值cancelable是否可以取消事件的默認(rèn)行為，返回一個(gè)布爾值eventPhase返回事件所處事件階段。1表示捕獲階段，2表示目標(biāo)階段，3表示冒泡階段方法preventDefault()取消事件的默認(rèn)行為，當(dāng)cancelable屬性為true時(shí)此方法有效stopPropagation()阻止事件冒泡，當(dāng)bubbles屬性為true時(shí)此方法有效表

事件對(duì)象的常用屬性和方法在實(shí)際開發(fā)中，通常需要獲取事件的相關(guān)信息，有時(shí)還需要取消事件的默認(rèn)行為或阻止事件冒泡，這些需求都可以使用事件對(duì)象的屬性和方法解決。<divid="div1">div1 <divid="div2">div2</div> </div> <script> //通過(guò)id屬性div1獲取元素，并為元素綁定鼠標(biāo)事件，然后獲取事件對(duì)象 document.getElementById('div1').onclick=function(event){ console.log('div1type:',event.type);//返回當(dāng)前事件類型 //返回觸發(fā)當(dāng)前事件的目標(biāo)元素 console.log('div1target:',event.target); //返回響應(yīng)當(dāng)前事件的目標(biāo)元素 console.log('div1currentTarget:',event.currentTarget); //返回事件所處事件階段 console.log('div1eventPhase:',event.eventPhase); }【例12-4】

獲取事件的相關(guān)信息，包括事件名稱、觸發(fā)當(dāng)前事件的目標(biāo)元素、響應(yīng)當(dāng)前事件的元素等（以下提供部分代碼）。12.3事件對(duì)象【例12-4】

頁(yè)面效果和（單擊頁(yè)面中div2區(qū)域后）控制臺(tái)輸出結(jié)果如圖所示。獲取事件的相關(guān)信息12.3事件對(duì)象當(dāng)單擊頁(yè)面中div2區(qū)域后，控制臺(tái)輸出結(jié)果中輸出了兩個(gè)單擊事件的相關(guān)信息。其中，div2單擊事件的事件名稱為click，觸發(fā)該事件的目標(biāo)元素和響應(yīng)該事件的元素都為div2，事件所處事件階段為目標(biāo)階段；div1單擊事件的事件名稱也為click，觸發(fā)該事件的目標(biāo)元素為div2，響應(yīng)該事件的元素為div1，事件所處事件階段為冒泡階段。由此可知，觸發(fā)div1單擊事件的原因是事件冒泡。12.3事件對(duì)象值得注意的是，event對(duì)應(yīng)參數(shù)名稱可以自定義，通常使用“event”或者“e”表示。TISHI提示HTML中的部分元素有一些默認(rèn)的行為，如單擊a元素網(wǎng)頁(yè)將會(huì)跳轉(zhuǎn)、單擊表單的submit按鈕將向指定的服務(wù)器地址發(fā)送網(wǎng)絡(luò)請(qǐng)求等。觸發(fā)單擊事件時(shí)，這些默認(rèn)行為可以實(shí)現(xiàn)一些常見功能，但某些情況下需要取消這些事件的默認(rèn)行為，此時(shí)可以使用事件對(duì)象的preventDefault()方法實(shí)現(xiàn)。12.3事件對(duì)象<aid="link"href="">單擊前往百度首頁(yè)</a><script> vara=document.getElementById('link'); //事件監(jiān)聽 a.addEventListener('click',function(event){ //彈出確認(rèn)框，單擊“確定”按鈕返回true，單擊“取消”按鈕返回false，并將返回結(jié)果賦值給變量result varresult=confirm('確認(rèn)前往百度首頁(yè)嗎？'); if(!result){ //判斷條件是否為真 event.preventDefault(); //取消事件的默認(rèn)行為 } },false);</script>【例12-5】

取消事件的默認(rèn)行為。使用瀏覽器加載頁(yè)面，取消單擊超鏈接時(shí)的自動(dòng)跳轉(zhuǎn)行為，改為彈出確認(rèn)框，單擊“確定”按鈕，頁(yè)面會(huì)跳轉(zhuǎn)至百度首頁(yè)，單擊“取消”按鈕，頁(yè)面不會(huì)發(fā)生跳轉(zhuǎn)（以下提供部分代碼）。12.3事件對(duì)象【例12-5】

頁(yè)面效果如圖所示。12.3事件對(duì)象取消事件的默認(rèn)行為<divid="div1">div1 <divid="div2">div2 <divid="div3">div3</div> </div></div><script> document.getElementById('div1').onclick=function(){ console.log('div1'); } document.getElementById('div2').onclick=function(e){ console.log('div2'); e.stopPropagation();//阻止事件冒泡 } document.getElementById('div3').onclick=function(e){ console.log('div3'); e.stopPropagation();//阻止事件冒泡 }</script>【例12-6】

阻止事件冒泡（以下提供部分代碼）。12.3事件對(duì)象【例12-6】

頁(yè)面效果和（單擊頁(yè)面中div3區(qū)域后）控制臺(tái)輸出結(jié)果如圖所示。12.3事件對(duì)象阻止事件冒泡

常見事件類型12.4事件分為多種類型，不同的用戶操作行為會(huì)觸發(fā)不同類型的事件，常見的事件類型有鼠標(biāo)事件、鍵盤事件、焦點(diǎn)事件、頁(yè)面事件等。12.4常見事件類型12.4.1

鼠標(biāo)事件

PC端設(shè)備中，鼠標(biāo)事件是最常用的一類事件。例如，用戶單擊輪播圖的切換按鈕播放下一張圖片；用戶鼠標(biāo)滑過(guò)某個(gè)菜單時(shí)，隱藏的菜單內(nèi)容顯示出來(lái)等。這些效果都是通過(guò)監(jiān)聽鼠標(biāo)事件實(shí)現(xiàn)的。表列出了常用的鼠標(biāo)事件及其觸發(fā)場(chǎng)景。事件名稱觸發(fā)場(chǎng)景事件名稱觸發(fā)場(chǎng)景click按下并釋放任何鼠標(biāo)按鍵時(shí)觸發(fā)mouseout當(dāng)鼠標(biāo)離開某元素區(qū)域時(shí)觸發(fā)dblclick雙擊鼠標(biāo)按鍵時(shí)觸發(fā)mousemove當(dāng)鼠標(biāo)在元素內(nèi)移動(dòng)時(shí)觸發(fā)mousedown按下鼠標(biāo)任何按鍵時(shí)觸發(fā)mouseenter當(dāng)鼠標(biāo)首次進(jìn)入元素區(qū)域時(shí)觸發(fā)mouseup釋放鼠標(biāo)按鍵時(shí)觸發(fā)mouseleave當(dāng)鼠標(biāo)離開元素區(qū)域時(shí)觸發(fā)mouseover當(dāng)鼠標(biāo)進(jìn)入某元素區(qū)域時(shí)觸發(fā)mousewheel當(dāng)鼠標(biāo)滾輪滑動(dòng)時(shí)觸發(fā)表

常用的鼠標(biāo)事件及其觸發(fā)場(chǎng)景

12.4常見事件類型超鏈接上表所展示的部分事件之間是存在關(guān)聯(lián)的。例如，觸發(fā)了mousedown和mouseup事件之后才會(huì)觸發(fā)click事件，連續(xù)兩次觸發(fā)click事件才會(huì)觸發(fā)dblclick事件。此外，除mouseenter和mouseleave之外，其他鼠標(biāo)事件是支持冒泡的。TUOZHANYUEDU拓展閱讀12.4常見事件類型<pid="p1">mousedown，按下鼠標(biāo)任何按鍵時(shí)觸發(fā)，字體背景變?yōu)榛疑?；mouseup，釋放鼠標(biāo)按鍵時(shí)觸發(fā)，字體背景變?yōu)榘咨?lt;/p><pid="p2">mouseover，當(dāng)鼠標(biāo)進(jìn)入某元素區(qū)域時(shí)觸發(fā)，字號(hào)變大；mouseout，當(dāng)鼠標(biāo)離開某元素區(qū)域時(shí)觸發(fā)，字號(hào)變小。</p><script> vara1=document.getElementById('p1'); //按下鼠標(biāo)任何按鍵時(shí)，字體背景變?yōu)榧t色 a1.onmousedown=function(){ a1.style.background="red"; }【例12-7】觸發(fā)不同的鼠標(biāo)事件（以下提供部分代碼）。12.4常見事件類型 //釋放鼠標(biāo)按鍵時(shí)，字體背景變?yōu)榛疑?a1.onmouseup=function(){ a1.style.background="gainsboro"; } vara2=document.getElementById('p2'); //當(dāng)鼠標(biāo)進(jìn)入該元素區(qū)域時(shí)，字號(hào)變大 a2.onmouseover=function(){ a2.style.fontSize="30px"; } //當(dāng)鼠標(biāo)離開該元素區(qū)域時(shí)，字號(hào)變小 a2.onmouseout=function(){ a2.style.fontSize="20px"; }</script>【例12-7】觸發(fā)不同的鼠標(biāo)事件（以下提供部分代碼）。12.4常見事件類型【例12-7】頁(yè)面效果如圖所示。觸發(fā)不同鼠標(biāo)事件頁(yè)面效果12.4常見事件類型當(dāng)用戶使用鍵盤進(jìn)行操作時(shí)會(huì)觸發(fā)相應(yīng)的鍵盤事件，利用鍵盤事件可以實(shí)現(xiàn)一些常見的功能，如監(jiān)聽Enter按鍵進(jìn)行表單的提交，監(jiān)聽Esc按鍵關(guān)閉展開的菜單等。12.4.2

鍵盤事件事件名稱觸發(fā)場(chǎng)景keydown用戶按下鍵盤按鍵時(shí)，長(zhǎng)按將多次觸發(fā)keyup用戶從鍵盤按鍵抬起時(shí)觸發(fā)keypress用戶按下鍵盤字符鍵時(shí)觸發(fā)（字符鍵不包括Esc、Shift等按鍵）表

常用的鍵盤事件及其觸發(fā)場(chǎng)景12.4常見事件類型

超鏈接在鍵盤事件觸發(fā)時(shí)，該事件對(duì)象中會(huì)包含一個(gè)鍵盤按鍵的鍵碼（屬性值為keyCode），其中keypress事件對(duì)應(yīng)字符鍵的鍵碼與ASCⅡ碼中對(duì)應(yīng)字母或數(shù)字的編碼相同，如字母A的鍵碼為65。TUOZHANYUEDU拓展閱讀12.4常見事件類型<div>請(qǐng)輸入賬號(hào):<inputid="account"type="text"></div><div>請(qǐng)輸入密碼:<inputid="password"type="password"></div><buttonid="submit">登錄</button><script> //定義登錄函數(shù) functionlogin(){ if(document.getElementById('account').value.length<=0){ alert('請(qǐng)輸入賬號(hào)'); return; } if(document.getElementById('password').value.length<=0){ alert('請(qǐng)輸入密碼'); return; }【例12-8】大多數(shù)網(wǎng)站都有登錄功能，該功能既可以使用鼠標(biāo)事件實(shí)現(xiàn)，也可以使用鍵盤事件實(shí)現(xiàn)，本例我們通過(guò)按下Enter鍵實(shí)現(xiàn)網(wǎng)站登錄功能（以下提供部分代碼）。12.4常見事件類型 alert('登錄成功'); } //監(jiān)聽鍵盤事件 document.onkeydown=function(e){ if(e.keyCode!==13){//判斷是否為Enter按鍵 return;//如果不是Enter按鍵，直接返回 } login(); } //監(jiān)聽鼠標(biāo)點(diǎn)擊按鈕事件 document.getElementById('submit').onclick=function(e){ login(); }</script>12.4常見事件類型【例12-8】輸入賬號(hào)和密碼，按下Enter鍵或用鼠標(biāo)單擊“登錄”按鈕后的頁(yè)面效果如圖所示。12.4常見事件類型鍵盤事件的應(yīng)用12.4.3焦點(diǎn)事件焦點(diǎn)事件是在頁(yè)面某個(gè)元素獲得焦點(diǎn)或者失去焦點(diǎn)時(shí)觸發(fā)的事件。例如，單擊頁(yè)面上某個(gè)輸入框，那么該輸入框便獲得了焦點(diǎn)并觸發(fā)焦點(diǎn)事件；當(dāng)單擊輸入框外部時(shí)，該輸入框便失去焦點(diǎn)并觸發(fā)焦點(diǎn)事件。事件名稱觸發(fā)場(chǎng)景事件名稱觸發(fā)場(chǎng)景focus當(dāng)文本框獲得焦點(diǎn)時(shí)觸發(fā)blur當(dāng)文本框失去焦點(diǎn)時(shí)觸發(fā)表

常用的焦點(diǎn)事件及其觸發(fā)場(chǎng)景12.4常見事件類型

<div>請(qǐng)輸入手機(jī)號(hào):<inputid="phone"type="text"></div><pid="tips"style="display:none;color:red;">請(qǐng)輸入正確的手機(jī)號(hào)碼</p><buttonid="submit"style="display:none;">提交</button><script> varp=document.getElementById('phone'); vart=document.getElementById('tips'); vars=document.getElementById('submit'); //定義檢測(cè)函數(shù)，檢測(cè)輸入的手機(jī)號(hào)格式是否正確 functioncheck(){ varvalue=p.value; //如果輸入框內(nèi)容不是數(shù)字且長(zhǎng)度不為11，則認(rèn)為手機(jī)號(hào)格式錯(cuò)誤，提示用戶 if(isNaN(+value)||value.length!==11){ p.style.color='red'; t.style.display='block';【例12-9】焦點(diǎn)事件最常見的使用場(chǎng)景就是進(jìn)行表單規(guī)則校驗(yàn)。本例我們使用焦點(diǎn)事件實(shí)現(xiàn)手機(jī)號(hào)碼格式校驗(yàn)（以下提供部分代碼）。12.4常見事件類型 s.style.display='none'; }else{ p.style.color='black'; s.style.display='block'; } } p.onfocus=function(e){ //監(jiān)聽輸入框獲得焦點(diǎn)事件 p.style.color='black'; t.style.display='none'; } p.onblur=function(e){ //監(jiān)聽輸入框失去焦點(diǎn)事件 check(); } s.onclick=function(e){//監(jiān)聽按鈕點(diǎn)擊事件 alert('提交成功') }</script>【例12-9】焦點(diǎn)事件最常見的使用場(chǎng)景就是進(jìn)行表單規(guī)則校驗(yàn)。本例我們使用焦點(diǎn)事件實(shí)現(xiàn)手機(jī)號(hào)碼格式校驗(yàn)（以下提供部分代碼）。12.4常見事件類型【例12-9】分別輸入不完整和完整的手機(jī)號(hào)碼，并在輸入框外單擊，頁(yè)面效果如圖所示。12.4常見事件類型焦點(diǎn)事件的應(yīng)用12.4.4

頁(yè)面事件頁(yè)面事件主要是指瀏覽器頁(yè)面級(jí)別的事件，如頁(yè)面滾動(dòng)觸發(fā)的事件、頁(yè)面加載完成觸發(fā)的事件等。利用頁(yè)面事件可以完成一些常見功能。例如，監(jiān)聽瀏覽器scroll事件，當(dāng)進(jìn)度條滾動(dòng)到某個(gè)位置時(shí)顯示對(duì)應(yīng)內(nèi)容；監(jiān)聽<img>的load事件，獲取加載圖片的寬高等。表列出了常見的頁(yè)面事件及其觸發(fā)場(chǎng)景。事件名稱觸發(fā)場(chǎng)景l(fā)oad當(dāng)頁(yè)面完全加載，或img元素加載圖片完成，或框架加載完成時(shí)觸發(fā)unload當(dāng)頁(yè)面或者框架卸載時(shí)觸發(fā)scroll支持滾動(dòng)的元素滾動(dòng)時(shí)觸發(fā)resize當(dāng)window大小或者框架大小發(fā)生變化時(shí)觸發(fā)error當(dāng)js執(zhí)行出現(xiàn)異常，或<img>元素加載圖片失敗，或框架加載失敗時(shí)觸發(fā)表

常見的頁(yè)面事件及其觸發(fā)場(chǎng)景12.4常見事件類型

12.4.4

頁(yè)面事件load事件是日常開發(fā)中最常用的事件之一，該事件是在頁(yè)面所有元素（包括DOM元素、css文件、js文件、圖片等外部資源）加載完成后才觸發(fā)的事件。監(jiān)聽頁(yè)面load事件通常使用window.onload，一般情況下，在想要獲取頁(yè)面中某一元素的時(shí)候會(huì)用到。12.4常見事件類型

<head> <metacharset="utf-8"> <title>例12-10</title> <script> window.onload=function(){ vars=document.getElementById('submit'); s.onclick=function(){ alert("頁(yè)面事件") } } </script></head><body> <buttonid="submit">提交</button></body>【例12-10】頁(yè)面事件的應(yīng)用（以下提供部分代碼），頁(yè)面效果如圖所示。12.4常見事件類型頁(yè)面事件的應(yīng)用超鏈接在默認(rèn)情況下，瀏覽器是從上到下解析一個(gè)HTML文檔的。在例12-10中，瀏覽器從上到下解析HTML文檔時(shí)，解析到window.onload時(shí)，瀏覽器不會(huì)先執(zhí)行window.onload中的代碼，而是繼續(xù)往下解析，直到把整個(gè)HTML文檔解析完之后才會(huì)回去執(zhí)行window.onload中的代碼。Gaoshoudianbo高手點(diǎn)撥12.4常見事件類型

事件優(yōu)化12.5在JavaScript中，常采用事件委托和事件刪除的方式進(jìn)行事件優(yōu)化，從而提高網(wǎng)頁(yè)運(yùn)行效率，減少系統(tǒng)資源占用，優(yōu)化網(wǎng)頁(yè)效果。12.5事件優(yōu)化事件委托又稱事件代理或事件托管，它利用瀏覽器事件冒泡機(jī)制對(duì)事件處理過(guò)程進(jìn)行優(yōu)化。簡(jiǎn)單來(lái)說(shuō)，它就是把目標(biāo)節(jié)點(diǎn)的事件綁定到其父節(jié)點(diǎn)上，在事件傳播過(guò)程中，事件逐層冒泡總能被父節(jié)點(diǎn)捕獲，這樣就可以減少元素事件綁定個(gè)數(shù)，從而提高網(wǎng)頁(yè)運(yùn)行效率。假設(shè)一個(gè)網(wǎng)頁(yè)上存在多個(gè)按鈕，如果需要監(jiān)聽這些按鈕元素的單擊事件，就需要為這些元素都綁定單擊事件，這無(wú)疑將占用大量資源。如果綁定一個(gè)事件來(lái)處理這些元素的單擊事件，則既能節(jié)約計(jì)算機(jī)資源，又能達(dá)到優(yōu)化網(wǎng)頁(yè)的目的。12.5.1

事件委托

12.5事件優(yōu)化<button>btn1</button><button>btn2</button><button>btn3</button><script> //為body元素綁定單擊事件 document.body.onclick=function(e){ //如果單擊的元素為button，則提示控制臺(tái)輸出對(duì)應(yīng)內(nèi)容 if(e.target.tagName==='BUTTON'){ console.log('本次單擊:',e.target.innerText); } }</script>【例12-11】事件委托的應(yīng)用（以下提供部分代碼），頁(yè)面效果和（單擊不同按鈕后）控制臺(tái)輸出結(jié)果如圖所示。事件委托的應(yīng)用12.5事件優(yōu)化當(dāng)網(wǎng)頁(yè)中有元素綁定事件時(shí)，只要網(wǎng)頁(yè)不關(guān)閉，所有綁定事件就會(huì)一直占用系統(tǒng)資源。在實(shí)際開發(fā)中，有些事件在觸發(fā)一次或者幾次之后就不需要再監(jiān)聽了，此時(shí)可以通過(guò)事件刪除的方式釋放這些不再使用的資源。12.5.2

事件刪除

12.5事件優(yōu)化12.5事件優(yōu)化當(dāng)采用事件綁定方式處理瀏覽器事件后，如果需要?jiǎng)h除該事件，僅需將事件屬性設(shè)置為null即可，實(shí)現(xiàn)代碼如下：1．事件綁定刪除<buttonid="hello">hello</button>varbtn=document.getElementById('hello');btn.onclick=function(){//綁定鼠標(biāo)單擊事件

console.log('hello');}btn.onclick=null;

//將事件屬性設(shè)置為null，刪除綁定事件

12.5事件優(yōu)化當(dāng)采用事件監(jiān)聽方式處理瀏覽器事件后，要?jiǎng)h除該事件需要使用removeEventListener()方法。值得注意的是，該方法的參數(shù)必須和addEventListener()方法的參數(shù)保持一致。實(shí)現(xiàn)代碼如下：2．事件監(jiān)聽刪除<buttonid="hello">hello</button>//處理單擊事件函數(shù)functionhandler(){

console.log('hello');}varbtn=document.getElementById('hello');btn.addEventListener('click',handler,false);//刪除綁定事件有效btn.removeEventListener('click',handler,false);//刪除綁定事件無(wú)效btn.removeEventListener('click',function(){

console.log('hello');},false);在第9章的實(shí)戰(zhàn)演練中已經(jīng)介紹過(guò)如何采用外鏈?zhǔn)降姆绞綖椤敖鹌簌Z教育”主頁(yè)鏈接js文件。下面使用JavaScript制作“金企鵝教育”主頁(yè)的輪播圖，如圖所示?！谱鳌敖鹌簌Z教育”主頁(yè)的輪播圖實(shí)戰(zhàn)演練WEB輪播圖的頁(yè)面效果超鏈接步驟1

在HBuilderX中導(dǎo)入本書配套素材“素材與案例\第12章\實(shí)戰(zhàn)演練\JinqieProject”文件夾，然后打開“index.html”文件?！谱鳌敖鹌簌Z教育”主頁(yè)的輪播圖實(shí)戰(zhàn)演練WEB超鏈接步驟2

添加輪播圖的內(nèi)容。在“index.html”文件中表示輪播圖區(qū)塊的<sectionid="wrap"class="banner">…</section>標(biāo)簽中添加以下代碼，設(shè)置輪播圖中的圖片和數(shù)字導(dǎo)航?！谱鳌敖鹌簌Z教育”主頁(yè)的輪播圖實(shí)戰(zhàn)演練WEB<ulid="pic"class="banner_p">

<li><imgsrc="img/banner_1.png"alt=""></li>

<li><imgsrc="img/banner_2.png"alt=""></li>

<li><imgsrc="img/banner_3.png"alt=""></li></ul><olid="list"class="banner_b">

<liclass="on">1</li>

<li>2</li>

<li>3</li></ol>超鏈接步驟3

設(shè)置輪播圖的樣式。在“index.css”文件中添加以下代碼，使用選擇器.banner、.banner.banner_p等設(shè)置樣式，可獲得輪播圖的頁(yè)面效果，如圖所示?！谱鳌敖鹌簌Z教育”主頁(yè)的輪播圖實(shí)戰(zhàn)演練WEB.banner{position:relative;

width:1200px;

height:380px;

margin:10pxauto0auto;

box-shadow:005pxwhite;

overflow:hidden;}.banner.banner_p{position:absolute;

width:6000px;

height:380px;

z-index:1;}.banner.banner_pli{float:left;

width:1200px;

height:380px;}超鏈接——制作“金企鵝教育”主頁(yè)的輪播圖實(shí)戰(zhàn)演練WEB.banner.banner_b{position:absolute;

bottom:20px;

width:200px;

height:10px;

z-index:2;

left:500px;}.banner.banner_bli{margin-left:5px;

display:inline-block;

width:20px;

height:20px;

border-radius:50%;

background-color:#6CA1A0;

text-align:center;

color:white;

cursor:pointer;}.banner.banner_bli.on{background-color:#EEF5F7;

color:#6CA1A0;}超鏈接步驟4

實(shí)現(xiàn)輪播圖的動(dòng)態(tài)效果。在“index.js”文件中添加以下代碼，通過(guò)監(jiān)聽頁(yè)面load事件、定義不同的功能函數(shù)、綁定不同的鼠標(biāo)事件、調(diào)用不同的功能函數(shù)實(shí)現(xiàn)輪播圖的動(dòng)態(tài)效果，包括圖片自動(dòng)切換、鼠標(biāo)劃過(guò)圖片切換停止、鼠標(biāo)劃過(guò)數(shù)字導(dǎo)航切換至對(duì)應(yīng)圖片等。——制作“金企鵝教育”主頁(yè)的輪播圖實(shí)戰(zhàn)演練WEB//監(jiān)聽頁(yè)面load事件，在頁(yè)面所有元素加載完成后才觸發(fā)該事件window.onload=function(){

//獲取HTML文檔中的元素，并賦值給聲明的變量

varwrap=document.getElementById('wrap'),

pic=document.getElementById('pic').getElementsByTagName("li"),

list=document.getElementById('list').getElementsByTagName('li'),

index=0,

timer=null;超鏈接——制作“金企鵝教育”主頁(yè)的輪播圖實(shí)戰(zhàn)演練WEB//定義圖片切換函數(shù)functionchangePic(curIndex){

for(vari=0;i<pic.length;++i){

pic[i].style.display="none";