《Vue.js3Web開發(fā)案例教程（在線實(shí)訓(xùn)版）》 課件 05 事件處理

vue.js

2024.7vue.js第5章

事件處理

標(biāo)準(zhǔn)DOM中的事件事件對(duì)象使用Vue.js處理事件DEMODEMO（監(jiān)視鼠標(biāo)移動(dòng)）事件修飾符DEMO修飾符使用說明按鍵修飾符DEMO第5章

事件處理

第5章

事件處理標(biāo)準(zhǔn)DOM中的事件事件與事件流事件對(duì)象第5章

事件處理事件對(duì)象標(biāo)準(zhǔn)DOM類型讀/寫說明altKeyBoolean讀寫按下ALT鍵則為true，否則為falsebuttonInteger讀寫鼠標(biāo)事件，值對(duì)應(yīng)按下的鼠標(biāo)鍵，詳見6.4.1節(jié)cancelableBoolean只讀是否可以取消事件的默認(rèn)行為stopPropagation()FunctionN/A可以調(diào)用該方法來阻止事件向上冒泡clientXInteger只讀鼠標(biāo)在客戶端區(qū)域（當(dāng)前窗口）的水平坐標(biāo)，不包括工具欄、滾動(dòng)條等clientYInteger只讀鼠標(biāo)在客戶端區(qū)域（當(dāng)前窗口）的垂直坐標(biāo)，不包括工具欄、滾動(dòng)條等ctrlKeyBoolean只讀按下Ctrl鍵則為true，否則為falserelatedTargetElement只讀鼠標(biāo)所離開的元素relatedTargetElement只讀鼠標(biāo)正在進(jìn)入的元素第5章

事件處理事件對(duì)象標(biāo)準(zhǔn)DOM類型讀/寫說明charCodeInteger只讀按下按鍵的Unicode值keyCodeInteger讀寫keypress時(shí)為0，其余為按下按鍵的數(shù)字代號(hào)。detailInteger只讀鼠標(biāo)按鈕點(diǎn)擊的次數(shù)preventDefault()FunctionN/A可以調(diào)用該方法來阻止事件的默認(rèn)行為screenXInteger只讀鼠標(biāo)相對(duì)于屏幕的水平坐標(biāo)screenYInteger只讀鼠標(biāo)相對(duì)于屏幕的垂直坐標(biāo)shiftKeyBoolean只讀按下Shift鍵則為true，否則為falsetargetElement只讀引起事件的元素/對(duì)象typeString只讀事件的名稱第5章

事件處理事件對(duì)象瀏覽器支持的事件種類是非常多了，可以分為幾類：用戶界面事件：涉及與BOM交互的通用瀏覽器事件。焦點(diǎn)事件：在元素獲得或者失去焦點(diǎn)時(shí)觸發(fā)的事件。鼠標(biāo)事件：使用鼠標(biāo)在頁面上執(zhí)行某些操作時(shí)觸發(fā)的事件。滾輪事件：使用鼠標(biāo)滾輪時(shí)觸發(fā)的事件。輸入事件：向文檔中輸入文本時(shí)觸發(fā)的事件。鍵盤事件：使用鍵盤在頁面上執(zhí)行某些操作時(shí)觸發(fā)的事件。輸入法事件：使用某些輸入法時(shí)觸發(fā)的事件。移動(dòng)設(shè)備出現(xiàn)以后，又增加了“觸摸”事件。第5章

事件處理使用Vue.js處理事件以內(nèi)聯(lián)方式響應(yīng)事件事件處理方法在Vue.js中使用事件對(duì)象第5章

事件處理DEMO第5章

事件處理動(dòng)手練習(xí)：監(jiān)視鼠標(biāo)移動(dòng)案例結(jié)合了一下本章前面學(xué)到的幾個(gè)知識(shí)點(diǎn)：1.鼠標(biāo)事件的處理2.事件對(duì)象中獲取信息3.計(jì)算屬性4.將計(jì)算屬性綁定到了元素的CSS樣式上。第5章

事件處理DEMO第5章

事件處理事件修飾符.stop.self.capture.once.prevent第5章

事件處理DEMO第5章

事件處理修飾符使用說明獨(dú)立使用事件修飾符<!--只有修飾符--><formv-on:submit.prevent></form>串聯(lián)使用事件修飾符<!--修飾符可以串聯(lián)--><av-on:click.stop.prevent="doThat"></a>第5章

事件處理按鍵修飾符與按鍵相關(guān)的3個(gè)事件keydownkeypresskeyup按鍵名系統(tǒng)修飾符.ctrl.alt.shift.meta鼠標(biāo)按鈕修飾符.left：鼠標(biāo)左鍵被按下.right：鼠標(biāo)右鍵被按下.middle：鼠標(biāo)中間鍵被按下按鍵名說明.enter回車鍵.tab制表符.delete捕獲“刪除”和“退格”鍵.esc退出鍵.space空格鍵.up上鍵.down下鍵.left左鍵.right右鍵第5章

事件處理DEMO第5章

事件處理

標(biāo)準(zhǔn)D