《程序的交互控制》課件

程序的交互控制程序的交互控制是程序設(shè)計(jì)中不可或缺的一部分。通過(guò)交互控制，用戶可以與程序進(jìn)行交流，并根據(jù)自己的需求調(diào)整程序的行為。課程目標(biāo)了解交互控制概念掌握交互控制基本概念，包括事件驅(qū)動(dòng)編程、事件處理機(jī)制等。學(xué)習(xí)常見(jiàn)事件類(lèi)型熟悉鍵盤(pán)事件、鼠標(biāo)事件、觸摸事件、表單事件、窗口事件、定時(shí)器事件等。掌握事件處理方法學(xué)習(xí)如何使用事件處理函數(shù)、事件對(duì)象屬性、事件對(duì)象方法等。應(yīng)用交互控制技術(shù)通過(guò)案例實(shí)踐，將交互控制知識(shí)應(yīng)用于實(shí)際項(xiàng)目開(kāi)發(fā)中。什么是交互控制交互控制是指用戶與程序之間的互動(dòng)方式，讓用戶能夠通過(guò)各種操作來(lái)控制程序的行為。交互控制允許用戶在程序執(zhí)行過(guò)程中進(jìn)行干預(yù)，更改程序流程，并根據(jù)自身需求定制化體驗(yàn)。交互控制的實(shí)現(xiàn)方式用戶界面設(shè)計(jì)用戶界面設(shè)計(jì)使用按鈕、文本框等元素提供用戶交互方式，例如點(diǎn)擊、輸入等。鍵盤(pán)事件鍵盤(pán)事件處理用戶鍵盤(pán)輸入，例如按鍵按下、釋放等。鼠標(biāo)事件鼠標(biāo)事件處理用戶鼠標(biāo)操作，例如點(diǎn)擊、移動(dòng)、滾輪滾動(dòng)等。事件監(jiān)聽(tīng)器事件監(jiān)聽(tīng)器用于監(jiān)聽(tīng)特定事件，并在事件發(fā)生時(shí)執(zhí)行相應(yīng)的代碼。事件驅(qū)動(dòng)編程簡(jiǎn)介1定義事件驅(qū)動(dòng)編程是一種編程范式，程序的執(zhí)行流程由事件觸發(fā)，而不是嚴(yán)格按照代碼順序執(zhí)行。2事件事件是程序運(yùn)行過(guò)程中發(fā)生的特定操作或狀態(tài)改變，例如用戶點(diǎn)擊按鈕、鼠標(biāo)移動(dòng)或窗口關(guān)閉等。3事件處理程序事件處理程序是響應(yīng)特定事件的代碼塊，當(dāng)事件發(fā)生時(shí)，程序會(huì)調(diào)用相應(yīng)的事件處理程序來(lái)執(zhí)行相應(yīng)的操作。事件處理機(jī)制1事件捕獲瀏覽器捕獲事件，從根節(jié)點(diǎn)開(kāi)始逐級(jí)向下傳播到目標(biāo)節(jié)點(diǎn)。2事件目標(biāo)事件最終到達(dá)的節(jié)點(diǎn)，通常是觸發(fā)事件的節(jié)點(diǎn)。3事件冒泡從目標(biāo)節(jié)點(diǎn)開(kāi)始，事件逐級(jí)向上傳播到根節(jié)點(diǎn)，并可能被多個(gè)節(jié)點(diǎn)處理。4事件循環(huán)瀏覽器在事件循環(huán)中不斷檢查是否有事件發(fā)生，并將事件傳遞給相應(yīng)的處理函數(shù)。事件流的傳播1捕獲階段從最外層元素開(kāi)始，向目標(biāo)元素傳播2目標(biāo)階段到達(dá)事件目標(biāo)元素3冒泡階段從目標(biāo)元素開(kāi)始，向最外層元素傳播事件流描述了事件在DOM樹(shù)中傳播的順序。事件處理函數(shù)定義事件處理函數(shù)是一個(gè)專(zhuān)門(mén)用于處理特定事件的函數(shù)。執(zhí)行當(dāng)事件發(fā)生時(shí)，事件處理函數(shù)會(huì)被自動(dòng)調(diào)用執(zhí)行。響應(yīng)事件處理函數(shù)負(fù)責(zé)根據(jù)事件類(lèi)型執(zhí)行相應(yīng)的操作，例如更新界面、改變數(shù)據(jù)等。鍵盤(pán)事件鍵盤(pán)事件類(lèi)型鍵盤(pán)事件主要用于捕獲用戶在鍵盤(pán)上按下的按鍵。keydownkeyupkeypress示例當(dāng)用戶按下鍵盤(pán)上的字母“A”鍵時(shí)，會(huì)觸發(fā)鍵盤(pán)事件。<script>document.addEventListener('keydown',function(event){if(event.key==='a'){console.log('按下字母A');}});</script>鼠標(biāo)事件單擊事件鼠標(biāo)單擊元素時(shí)觸發(fā)。雙擊事件鼠標(biāo)雙擊元素時(shí)觸發(fā)。鼠標(biāo)懸停事件鼠標(biāo)指針懸停在元素上時(shí)觸發(fā)。鼠標(biāo)移出事件鼠標(biāo)指針從元素上移開(kāi)時(shí)觸發(fā)。觸摸事件11.觸摸開(kāi)始手指接觸屏幕時(shí)觸發(fā)，用于識(shí)別觸摸開(kāi)始位置。22.觸摸移動(dòng)手指在屏幕上滑動(dòng)時(shí)觸發(fā)，用于跟蹤觸摸路徑。33.觸摸結(jié)束手指離開(kāi)屏幕時(shí)觸發(fā)，用于識(shí)別觸摸結(jié)束位置。44.觸摸取消觸摸被中斷或取消時(shí)觸發(fā)，例如接聽(tīng)電話。表單事件提交事件用戶提交表單時(shí)觸發(fā)，可用于驗(yàn)證數(shù)據(jù)或處理提交操作。重置事件用戶重置表單時(shí)觸發(fā)，可用于恢復(fù)表單的默認(rèn)值。輸入事件用戶在表單元素中輸入內(nèi)容時(shí)觸發(fā)，可用于實(shí)時(shí)校驗(yàn)輸入內(nèi)容。改變事件用戶更改表單元素值時(shí)觸發(fā)，可用于更新表單狀態(tài)或進(jìn)行其他操作。窗口事件窗口大小調(diào)整窗口大小調(diào)整事件在窗口尺寸發(fā)生變化時(shí)觸發(fā)，用于實(shí)現(xiàn)自適應(yīng)布局或執(zhí)行特定操作。窗口加載窗口加載事件在窗口完全加載完畢后觸發(fā)，用于初始化頁(yè)面元素或執(zhí)行依賴(lài)于頁(yè)面加載完成的操作。窗口關(guān)閉窗口關(guān)閉事件在窗口關(guān)閉之前觸發(fā)，用于確認(rèn)用戶是否保存數(shù)據(jù)或執(zhí)行其他清理操作。窗口焦點(diǎn)變化窗口焦點(diǎn)變化事件在窗口獲得或失去焦點(diǎn)時(shí)觸發(fā)，用于處理窗口狀態(tài)變化相關(guān)的邏輯。定時(shí)器事件定時(shí)器事件定時(shí)器事件允許程序在指定時(shí)間間隔后觸發(fā)事件，可以實(shí)現(xiàn)周期性任務(wù)。使用場(chǎng)景定時(shí)器事件通常用于創(chuàng)建動(dòng)畫(huà)、計(jì)時(shí)器、輪詢?nèi)蝿?wù)和延遲執(zhí)行操作。setInterval和setTimeoutJavaScript提供setInterval和setTimeout函數(shù)來(lái)創(chuàng)建定時(shí)器事件。自定義事件觸發(fā)特定邏輯用戶自定義事件，可以觸發(fā)特定邏輯或行為，滿足特定需求。靈活可控開(kāi)發(fā)者可以根據(jù)需要自定義事件名稱(chēng)、參數(shù)和觸發(fā)條件。代碼示例創(chuàng)建一個(gè)自定義事件添加事件監(jiān)聽(tīng)器觸發(fā)自定義事件事件委托機(jī)制減少事件綁定減少事件綁定次數(shù)，提高代碼效率。動(dòng)態(tài)添加元素?zé)o需為動(dòng)態(tài)添加的元素單獨(dú)綁定事件，提高代碼可維護(hù)性。事件冒泡基于事件冒泡機(jī)制，將事件綁定到父元素上。事件委托通過(guò)事件委托機(jī)制，可以實(shí)現(xiàn)更高效的事件處理。非冒泡事件事件處理模型事件處理模型是指事件發(fā)生后，如何傳遞到目標(biāo)元素并最終被處理的過(guò)程。常見(jiàn)的事件處理模型包括冒泡模型和捕獲模型。非冒泡事件非冒泡事件是指事件不會(huì)向上冒泡傳播，只能在觸發(fā)事件的元素上被處理，無(wú)法在父級(jí)元素上被監(jiān)聽(tīng)。常見(jiàn)非冒泡事件常見(jiàn)非冒泡事件包括focus、blur、load、error等，這些事件在事件處理模型中直接在目標(biāo)元素上被處理，不會(huì)向上冒泡傳播。開(kāi)發(fā)應(yīng)用了解非冒泡事件可以幫助開(kāi)發(fā)人員更好地理解事件處理模型，并根據(jù)實(shí)際需要選擇合適的事件處理方式，提高應(yīng)用程序的性能和可靠性。事件對(duì)象屬性事件類(lèi)型事件對(duì)象包含`type`屬性，表示事件類(lèi)型。例如，`click`、`mouseover`、`keydown`等。目標(biāo)元素事件對(duì)象包含`target`屬性，表示觸發(fā)事件的元素。例如，`click`事件的目標(biāo)元素就是被點(diǎn)擊的元素。當(dāng)前元素事件對(duì)象包含`currentTarget`屬性，表示當(dāng)前處理事件的元素。例如，事件冒泡時(shí)，`currentTarget`指的是當(dāng)前處于事件處理階段的元素。鼠標(biāo)位置事件對(duì)象包含`clientX`和`clientY`屬性，表示鼠標(biāo)指針相對(duì)于瀏覽器窗口左上角的坐標(biāo)。事件對(duì)象方法事件類(lèi)型事件對(duì)象提供了獲取事件類(lèi)型（如鼠標(biāo)點(diǎn)擊、鍵盤(pán)按下等）的方法，例如`type`屬性。目標(biāo)元素可以使用`target`屬性獲取事件觸發(fā)的目標(biāo)元素，方便進(jìn)行相關(guān)操作。事件路徑可以使用`path`屬性獲取事件觸發(fā)時(shí)的傳播路徑，包括觸發(fā)元素以及其所有祖先元素。阻止默認(rèn)行為利用`preventDefault()`方法可以阻止事件的默認(rèn)行為，例如阻止鏈接的跳轉(zhuǎn)行為或表單提交行為。阻止事件默認(rèn)行為1阻止默認(rèn)行為例如，鏈接的跳轉(zhuǎn)、表單的提交2event.preventDefault()阻止事件的默認(rèn)行為3事件對(duì)象包含事件的相關(guān)信息事件的默認(rèn)行為是指瀏覽器對(duì)特定事件的默認(rèn)響應(yīng)，例如，點(diǎn)擊鏈接會(huì)跳轉(zhuǎn)到鏈接地址。通過(guò)調(diào)用事件對(duì)象的`preventDefault()`方法可以阻止事件的默認(rèn)行為。停止事件傳播事件冒泡事件冒泡是指事件從目標(biāo)元素向上傳播到父元素，直至到達(dá)根元素的過(guò)程。阻止傳播可以使用`event.stopPropagation()`方法停止事件的進(jìn)一步傳播，防止事件到達(dá)父元素。示例當(dāng)點(diǎn)擊內(nèi)層元素時(shí)，使用`stopPropagation()`阻止事件向外層元素傳播。事件模擬創(chuàng)建事件對(duì)象使用`document.createEvent()`創(chuàng)建一個(gè)事件對(duì)象，并指定事件類(lèi)型，例如'click'或'keydown'。初始化事件對(duì)象使用事件對(duì)象的方法，例如`initEvent()`或`initMouseEvent()`，設(shè)置事件的詳細(xì)信息，例如目標(biāo)元素、鼠標(biāo)坐標(biāo)等。觸發(fā)事件使用目標(biāo)元素的`dispatchEvent()`方法，將創(chuàng)建的事件對(duì)象傳遞給該方法，觸發(fā)相應(yīng)的事件處理函數(shù)。案例分享：圖片輪播圖片輪播是一種常見(jiàn)的交互效果，常用于展示產(chǎn)品、廣告或圖片庫(kù)。它允許用戶瀏覽一系列圖片，并通過(guò)點(diǎn)擊或滑動(dòng)來(lái)控制圖片切換。圖片輪播的實(shí)現(xiàn)需要使用JavaScript和CSS，并利用事件處理機(jī)制來(lái)實(shí)現(xiàn)圖片的切換和動(dòng)畫(huà)效果。案例分享：下拉菜單下拉菜單是一種常見(jiàn)的交互組件，用于提供用戶選擇選項(xiàng)。通過(guò)點(diǎn)擊按鈕展開(kāi)菜單，用戶可以選擇其中一項(xiàng)，然后菜單收起。下拉菜單廣泛應(yīng)用于網(wǎng)站和應(yīng)用程序，例如導(dǎo)航欄、表單元素、選項(xiàng)設(shè)置等。案例分享：模態(tài)對(duì)話框模態(tài)對(duì)話框是一種常見(jiàn)的交互模式，用于向用戶顯示重要的信息或請(qǐng)求用戶進(jìn)行操作。它通常會(huì)覆蓋頁(yè)面內(nèi)容，并阻止用戶與頁(yè)面其他部分進(jìn)行交互，直到用戶關(guān)閉對(duì)話框或完成操作。常見(jiàn)的模態(tài)對(duì)話框類(lèi)型包括提示框、確認(rèn)框和錯(cuò)誤提示框等。模態(tài)對(duì)話框在用戶體驗(yàn)設(shè)計(jì)中起著重要作用。它可以確保用戶能夠集中注意力于當(dāng)前任務(wù)，避免因其他頁(yè)面內(nèi)容干擾而產(chǎn)生誤操作。同時(shí)，模態(tài)對(duì)話框可以有效地傳達(dá)重要的信息，例如錯(cuò)誤提示、確認(rèn)信息等。案例分享：表單校驗(yàn)表單校驗(yàn)在網(wǎng)頁(yè)開(kāi)發(fā)中至關(guān)重要，它可以有效地防止用戶提交錯(cuò)誤或不完整的信息。通過(guò)使用JavaScript，我們可以輕松地實(shí)現(xiàn)實(shí)時(shí)表單校驗(yàn)，在用戶輸入時(shí)即時(shí)檢測(cè)錯(cuò)誤并提供反饋。常見(jiàn)的表單校驗(yàn)功能包括：必填字段驗(yàn)證、郵箱格式驗(yàn)證、密碼強(qiáng)度驗(yàn)證、數(shù)據(jù)類(lèi)型驗(yàn)證等。這些功能可以提高用戶體驗(yàn)，并保證數(shù)據(jù)質(zhì)量。案例分享：拖拽功能拖放功能讓用戶能夠輕松地移動(dòng)元素，例如文本、圖像或文件。常見(jiàn)的應(yīng)用場(chǎng)景包括文件上傳、圖形編輯器和游戲開(kāi)發(fā)。通過(guò)監(jiān)聽(tīng)鼠標(biāo)事件，例如鼠標(biāo)按下、移動(dòng)和釋放，程序可以控制元素的移動(dòng)。此外，通過(guò)設(shè)置目標(biāo)元素的接收屬性，可以控制哪些元素可以接收拖放操作。拖放功能可以增強(qiáng)用戶體驗(yàn)，提高用戶操作效率，并為應(yīng)用程序提供更多互動(dòng)可能性。案例分享：進(jìn)度條動(dòng)畫(huà)進(jìn)度條可以展示任務(wù)的完成進(jìn)度，并為用戶提供視覺(jué)上的反饋，提升用戶體驗(yàn)。網(wǎng)頁(yè)加載進(jìn)度條可以顯示網(wǎng)頁(yè)的加載狀態(tài)，讓用戶了解網(wǎng)