PAGE1PAGE1PAGE2PAGE2

課題第26課事件優(yōu)化課時2課時（90min）教學(xué)目標(biāo)知識技能目標(biāo)：（1）了解事件優(yōu)化方式，包括事件委托和事件刪除素質(zhì)目標(biāo)：（1）學(xué)習(xí)事件的相關(guān)知識，增強(qiáng)探索意識，培養(yǎng)鉆研精神（2）參與實戰(zhàn)演練，加強(qiáng)專業(yè)技能，提升實踐能力教學(xué)重難點教學(xué)重點：事件委托教學(xué)難點：事件刪除教學(xué)方法問答法、討論法、講授法、實踐練習(xí)法、演示法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂教學(xué)設(shè)計第1節(jié)課：→→→傳授新知（20min）→實戰(zhàn)拓展（20min）第2節(jié)課：→實戰(zhàn)演練（30min）→課堂評價（7min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，把和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)了解事件優(yōu)化【學(xué)生】完成課前任務(wù)通過課前任務(wù)，讓學(xué)生提前了解了解事件優(yōu)化，為課堂上學(xué)習(xí)相關(guān)知識點做準(zhǔn)備考勤（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問題導(dǎo)入（3min）【教師】提出問題事件優(yōu)化有哪些方式？【學(xué)生】思考、舉手回答【教師】通過學(xué)生的回答引入要講的知識JavaScript中，常采用事件委托和事件刪除的方式進(jìn)行事件優(yōu)化，從而提高網(wǎng)頁運行效率，減少系統(tǒng)資源占用，優(yōu)化網(wǎng)頁效果。通過問題導(dǎo)入的方法，引導(dǎo)學(xué)生主動思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（20min）12.5事件優(yōu)化12.5.1事件委托【教師】講解事件委托，演示例子輔助理解事件委托又稱事件代理或事件托管，它利用瀏覽器事件冒泡機(jī)制對事件處理過程進(jìn)行優(yōu)化。簡單來說，它就是把目標(biāo)節(jié)點的事件綁定到其父節(jié)點上，在事件傳播過程中，事件逐層冒泡總能被父節(jié)點捕獲，這樣就可以減少元素事件綁定個數(shù)，從而提高網(wǎng)頁運行效率?！ㄔ斠娊滩模纠?2-11】事件委托的應(yīng)用…（詳見教材）【學(xué)生】聆聽、記錄、理解、觀看效果12.5.2事件刪除【教師】講解事件委托，演示例子輔助理解當(dāng)網(wǎng)頁中有元素綁定事件時，只要網(wǎng)頁不關(guān)閉，所有綁定事件就會一直占用系統(tǒng)資源。在實際開發(fā)中，有些事件在觸發(fā)一次或者幾次之后就不需要再監(jiān)聽了，此時可以通過事件刪除的方式釋放這些不再使用的資源。下面分別介紹事件綁定和事件監(jiān)聽的刪除方式。1．事件綁定刪除當(dāng)采用事件綁定方式處理瀏覽器事件后，如果需要刪除該事件，僅需將事件屬性設(shè)置為null即可，實現(xiàn)代碼如下：…（詳見教材）2．事件監(jiān)聽刪除當(dāng)采用事件監(jiān)聽方式處理瀏覽器事件后，要刪除該事件需要使用removeEventListener()方法。值得注意的是，該方法的參數(shù)必須和addEventListener()方法的參數(shù)保持一致。實現(xiàn)代碼如下：…（詳見教材）【學(xué)生】聆聽、記錄、理解、觀看效果通過教師的講解和演示例子，使學(xué)生了解事件優(yōu)化實戰(zhàn)拓展（15min）【教師】要求學(xué)生完成以下題目，有疑問可互相討論，或詢問老師實現(xiàn)一個連接字符串效果，在兩個輸入框中分別輸入字符串，單擊“提交”按鈕后，輸出兩個字符串連接后的字符串，頁面效果如圖所示。通過練習(xí)例子，鍛煉學(xué)生的編程能力第二節(jié)課問題導(dǎo)入（3min）【教師】提出問題怎樣制作輪播圖效果？【學(xué)生】思考、舉手回答【教師】通過學(xué)生的回答引入要講的知識通過問題導(dǎo)入的方法，引導(dǎo)學(xué)生主動思考，激發(fā)學(xué)生的學(xué)習(xí)興趣實戰(zhàn)演練（30min）制作“金企鵝教育”主頁的輪播圖【教師】展示此項目做成的最終效果，并找同學(xué)分析，該頁面有哪些元素，利用到本章所學(xué)的哪些知識在第9章的實戰(zhàn)演練中已經(jīng)介紹過如何采用外鏈?zhǔn)降姆绞綖椤敖鹌簌Z教育”主頁鏈接js文件。下面使用JavaScript制作“金企鵝教育”主頁的輪播圖，效果如下：…（詳見教材）【學(xué)生】觀看效果、思考、舉手回答【教師】要求學(xué)生先導(dǎo)入素材并添加輪播圖的內(nèi)容，遇到不會的問題可以掃描微課二維碼觀看視頻”制作“金企鵝教育”主頁的輪播圖”（詳見教材），可討論或咨詢老師步驟1在HBuilderX中導(dǎo)入本書配套素材“素材與案例\第12章\實戰(zhàn)演練\JinqieProject”文件夾，然后打開“index.html”文件。步驟2添加輪播圖的內(nèi)容。在“index.html”文件中表示輪播圖區(qū)塊的<sectionid="wrap"class="banner">…</section>標(biāo)簽中添加以下代碼，設(shè)置輪播圖中的圖片和數(shù)字導(dǎo)航?！ㄔ斠娊滩模緦W(xué)生】觀看微課、制作項目、討論【教師】講解設(shè)置輪播圖的樣式，然后讓學(xué)生根據(jù)講解繼續(xù)制作該項目，遇到不會的問題可以掃描微課二維碼觀看視頻”制作“金企鵝教育”主頁的輪播圖”（詳見教材），可討論或咨詢老師步驟3設(shè)置輪播圖的樣式。在“index.css”文件中添加以下代碼，使用選擇器.banner、.banner.banner_p等設(shè)置樣式，可獲得輪播圖的頁面效果?！ㄔ斠娊滩模緦W(xué)生】聆聽、思考、制作項目、討論【教師】講解實現(xiàn)輪播圖的動態(tài)效果，然后讓學(xué)生根據(jù)講解繼續(xù)制作該項目，遇到不會的問題可以掃描微課二維碼觀看視頻”制作“金企鵝教育”主頁的輪播圖”（詳見教材），可討論或咨詢老師步驟4實現(xiàn)輪播圖的動態(tài)效果。在“index.js”文件中添加以下代碼，通過監(jiān)聽頁面load事件、定義不同的功能函數(shù)、綁定不同的鼠標(biāo)事件、調(diào)用不同的功能函數(shù)實現(xiàn)輪播圖的動態(tài)效果，包括圖片自動切換、鼠標(biāo)劃過圖片切換停止、鼠標(biāo)劃過數(shù)字導(dǎo)航切換至對應(yīng)圖片等。…（詳見教材）【學(xué)生】聆聽、思考、制作項目、討論通過觀看微課和老師講解，讓學(xué)生掌握制作輪播圖的方法，鞏固事件的相關(guān)知識課堂評價（7min）【教師】對學(xué)生所做項目進(jìn)行評價，并總結(jié)本節(jié)課的要點，集中學(xué)生遇到的問題進(jìn)行講解【學(xué)生】反思、聆聽、對比、記錄通過對學(xué)問題的集中講解，可以讓學(xué)生注意有哪些問題容易出錯，避免以后再次出現(xiàn)課堂小結(jié)（3min）【教師】簡要總結(jié)本節(jié)課的要點本節(jié)課主要介紹了事件優(yōu)化的相關(guān)知識。通過本節(jié)課的學(xué)習(xí)，學(xué)生應(yīng)重點掌握以下內(nèi)容。（1）在JavaScript中，常采用事件委托和事件刪除的方式進(jìn)行事件優(yōu)化。（2）制作輪播圖的方法?！緦W(xué)生】總結(jié)回顧知識點總結(jié)知識點，使學(xué)生牢固掌握事件優(yōu)化的相關(guān)知識作業(yè)布置（2min）【教師】布置課后作業(yè)題目：請實現(xiàn)按ESC鍵關(guān)閉“打開的登錄框答案：【學(xué)生】完成課后任務(wù)通過課后作業(yè)復(fù)習(xí)鞏固學(xué)到的知識，通過代碼的編寫，鍛煉學(xué)生邏輯思維和編程能力教學(xué)反思本次課主要講解了事件優(yōu)化的兩種方式，以及制作了輪播圖項目，