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

vue.js

2024.7vue.js第5章

事件處理

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

事件處理

第5章

事件處理標準DOM中的事件事件與事件流事件對象第5章

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

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

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

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

事件處理DEMO第5章

事件處理動手練習：監(jiān)視鼠標移動案例結合了一下本章前面學到的幾個知識點：1.鼠標事件的處理2.事件對象中獲取信息3.計算屬性4.將計算屬性綁定到了元素的CSS樣式上。第5章

事件處理DEMO第5章

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

事件處理DEMO第5章

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

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

事件處理DEMO第5章

事件處理

標準D