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

常見事件類型12.5

事件優化實戰演練——制作“金企鵝教育”主頁的輪播圖

事件概述12.1事件可以理解為JavaScript監測到的瀏覽器行為或用戶行為，這些行為包括頁面加載、鼠標單擊某個按鈕、鼠標滑過某區域等。當JavaScript監測到這些行為時，它會執行一段程序來做出響應，這就實現了用戶與網頁的交互。12.1.1認識事件12.1事件概述在JavaScript中，程序對事件做出的響應稱為事件處理，其中涉及的程序代碼稱為事件處理程序。例如，當用戶在網頁中單擊某個按鈕時，這個行為就會被JavaScript中的click事件監測到，然后JavaScript會自動執行為click事件編寫的程序代碼（事件處理程序），從而進行事件處理，實現用戶與網頁的交互，如單擊按鈕打開提示框等。12.1.1認識事件12.1事件概述超鏈接自IE3和NetscapeNavigator2瀏覽器開始支持事件之后，由于當時沒有統一的事件標準，各瀏覽器都是按照自己的方式去實現瀏覽器事件，所以各瀏覽器需要監聽的事件名稱或監聽事件的方式都有所不同。在制定DOM2規范時，包含了對事件標準化規范的定義，此時瀏覽器事件才算擁有了一個較為統一的標準。目前大部分瀏覽器，如Chrome、Safari、Firefox等，都支持DOM2級事件的核心部分，但IE9之前的IE瀏覽器依然使用自己的事件標準，所以當開發者需要兼容IE8及更低版本的瀏覽器時，需要做好瀏覽器環境的兼容處理。TUOZHANYUEDU拓展閱讀12.1事件概述假設頁面上存在3個div元素，div1是div2的父元素，div2是div3的父元素，當用戶單擊div3元素時，到底哪些元素應該觸發這一單擊事件呢？僅僅是div3元素觸發單擊事件，還是包含div3元素的所有父元素都觸發該單擊事件呢？12.1.2

事件流12.1事件概述想一想對于上述問題，IE瀏覽器團隊和Netscape瀏覽器團隊有著一致的看法，那就是當div3元素被單擊時，它和它所有的父級元素都應該觸發該單擊事件。也就是說，當一個HTML元素產生一個事件時，該事件會沿元素節點與根節點之間的路徑傳播，路徑所經過的節點都會收到該事件，這個傳播過程就稱為事件流。IE瀏覽器團隊和Netscape瀏覽器團隊針對瀏覽器事件定義了兩種完全相反的瀏覽器事件流。IE瀏覽器的事件流是事件冒泡，而Netscape瀏覽器的事件流是事件捕獲。12.1.2

事件流12.1事件概述

事件冒泡是指事件流傳播的順序是從最內層元素（發生事件的元素節點）開始到最外層元素（DOM樹的根節點）逐層觸發，如圖所示。

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

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

支持事件流的瀏覽器越來越多，為了規范各瀏覽器對事件流的支持，W3C制定了DOM事件流規范。DOM事件流共分為3個階段，分別是捕獲階段、目標階段和冒泡階段，它綜合了IE瀏覽器和Netscape瀏覽器的事件流規則，如圖所示。12.1.2

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

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

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

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

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

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

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

獲取事件的相關信息，包括事件名稱、觸發當前事件的目標元素、響應當前事件的元素等（以下提供部分代碼）。12.3事件對象【例12-4】

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

取消事件的默認行為。使用瀏覽器加載頁面，取消單擊超鏈接時的自動跳轉行為，改為彈出確認框，單擊“確定”按鈕，頁面會跳轉至百度首頁，單擊“取消”按鈕，頁面不會發生跳轉（以下提供部分代碼）。12.3事件對象【例12-5】

頁面效果如圖所示。12.3事件對象取消事件的默認行為<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事件對象【例12-6】

頁面效果和（單擊頁面中div3區域后）控制臺輸出結果如圖所示。12.3事件對象阻止事件冒泡

常見事件類型12.4事件分為多種類型，不同的用戶操作行為會觸發不同類型的事件，常見的事件類型有鼠標事件、鍵盤事件、焦點事件、頁面事件等。12.4常見事件類型12.4.1

鼠標事件

PC端設備中，鼠標事件是最常用的一類事件。例如，用戶單擊輪播圖的切換按鈕播放下一張圖片；用戶鼠標滑過某個菜單時，隱藏的菜單內容顯示出來等。這些效果都是通過監聽鼠標事件實現的。表列出了常用的鼠標事件及其觸發場景。事件名稱觸發場景事件名稱觸發場景click按下并釋放任何鼠標按鍵時觸發mouseout當鼠標離開某元素區域時觸發dblclick雙擊鼠標按鍵時觸發mousemove當鼠標在元素內移動時觸發mousedown按下鼠標任何按鍵時觸發mouseenter當鼠標首次進入元素區域時觸發mouseup釋放鼠標按鍵時觸發mouseleave當鼠標離開元素區域時觸發mouseover當鼠標進入某元素區域時觸發mousewheel當鼠標滾輪滑動時觸發表

常用的鼠標事件及其觸發場景

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

鍵盤事件事件名稱觸發場景keydown用戶按下鍵盤按鍵時，長按將多次觸發keyup用戶從鍵盤按鍵抬起時觸發keypress用戶按下鍵盤字符鍵時觸發（字符鍵不包括Esc、Shift等按鍵）表

常用的鍵盤事件及其觸發場景12.4常見事件類型

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

常用的焦點事件及其觸發場景12.4常見事件類型

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

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

常見的頁面事件及其觸發場景12.4常見事件類型

12.4.4

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

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

事件優化12.5在JavaScript中，常采用事件委托和事件刪除的方式進行事件優化，從而提高網頁運行效率，減少系統資源占用，優化網頁效果。12.5事件優化事件委托又稱事件代理或事件托管，它利用瀏覽器事件冒泡機制對事件處理過程進行優化。簡單來說，它就是把目標節點的事件綁定到其父節點上，在事件傳播過程中，事件逐層冒泡總能被父節點捕獲，這樣就可以減少元素事件綁定個數，從而提高網頁運行效率。假設一個網頁上存在多個按鈕，如果需要監聽這些按鈕元素的單擊事件，就需要為這些元素都綁定單擊事件，這無疑將占用大量資源。如果綁定一個事件來處理這些元素的單擊事件，則既能節約計算機資源，又能達到優化網頁的目的。12.5.1

事件委托

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

事件刪除

12.5事件優化12.5事件優化當采用事件綁定方式處理瀏覽器事件后，如果需要刪除該事件，僅需將事件屬性設置為null即可，實現代碼如下：1．事件綁定刪除<buttonid="hello">hello</button>varbtn=document.getElementById('hello');btn.onclick=function(){//綁定鼠標單擊事件

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

//將事件屬性設置為null，刪除綁定事件

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

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

console.log('hello');},false);在第9章的實戰演練中已經介紹過如何采用外鏈式的方式為“金企鵝教育”主頁鏈接js文件。下面使用JavaScript制作“金企鵝教育”主頁的輪播圖，如圖所示。——制作“金企鵝教育”主頁的輪播圖實戰演練WEB輪播圖的頁面效果超鏈接步驟1

在HBuilderX中導入本書配套素材“素材與案例\第12章\實戰演練\JinqieProject”文件夾，然后打開“index.html”文件。——制作“金企鵝教育”主頁的輪播圖實戰演練WEB超鏈接步驟2

添加輪播圖的內容。在“index.html”文件中表示輪播圖區塊的<sectionid="wrap"class="banner">…</section>標簽中添加以下代碼，設置輪播圖中的圖片和數字導航。——制作“金企鵝教育”主頁的輪播圖實戰演練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

設置輪播圖的樣式。在“index.css”文件中添加以下代碼，使用選擇器.banner、.banner.banner_p等設置樣式，可獲得輪播圖的頁面效果，如圖所示。——制作“金企鵝教育”主頁的輪播圖實戰演練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;}超鏈接——制作“金企鵝教育”主頁的輪播圖實戰演練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

實現輪播圖的動態效果。在“index.js”文件中添加以下代碼，通過監聽頁面load事件、定義不同的功能函數、綁定不同的鼠標事件、調用不同的功能函數實現輪播圖的動態效果，包括圖片自動切換、鼠標劃過圖片切換停止、鼠標劃過數字導航切換至對應圖片等。——制作“金企鵝教育”主頁的輪播圖實戰演練WEB//監聽頁面load事件，在頁面所有元素加載完成后才觸發該事件window.onload=function(){

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

varwrap=document.getElementById('wrap'),

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

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

index=0,

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

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

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