iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 14
0
Modern Web

忍住不打牌位,只要30天VueJS帶你上A牌系列 第 14

Day14 指令大全 v-on

事件處理 v-on

綁定事件監聽器,綁定的事件類型是由參數指定。表示式可以是一個方法的名字一個行內語句鍵值對的物件(key、value),如果沒有修飾符也可以省略(p.s 物件表示式是不支援修飾符)。

語法: v-on:監聽事件.修飾符="表示式"
縮寫: @監聽事件.修飾符="表示式"

前天有提到的,v-on也可以使用動態事件。
v-on:[event]="doSomething"

在監聽原生DOM事件時,表示式的method只能以事件為唯一的參數。
v-on:click="submit"

如果使用內聯語句,語法可以使用一個$event 屬性當作參數。
v-on:click="submit('helloWorld', $event)"

v-on用在HTML樣板元素上時,只能監聽原生DOM事件。
用在自定義元件上時,可以監聽子元件觸發的自定義事件,$emit('my-event', XXX)。
<my-component @my-event="handleEvent"></my-component>
如果要監聽根元素的原生事件,可以使用.native修飾符。
v-on:click.native="doSomething"

使用物件表示式
v-on="{ mousedown: doMouseDown, mouseup: doMouseUp }"

事件修飾符大全:

  1. stop 修飾符告訴v-on阻止事件繼續傳播(阻止事件冒泡),調用event.stopPropagation()。
  2. prevent 修飾符告訴v-on對於觸發事件時調用event.preventDefault(),阻止該元素所有默認行為。
  3. capture 添加事件監聽器時使用 capture 模,內部元素觸發的事件先在此處理,然後才交由內部元素進行處理。
  4. self 當事件是從監聽器綁定的元素本身觸發時才會觸發。
  5. {keyCode | keyAlias} 當事件是從特定鍵觸發時才觸發。
  6. native 監聽元件根元素的原生事件。
  7. once 事件只觸發一次。
  8. passive 立即觸發元素的默認行為,以{ passive: true }模式添加偵聽器。
  9. left 當點擊鼠標左鍵時觸發。
  10. right 當點擊鼠標右鍵時觸發。
  11. middle 當點擊鼠標中鍵時觸發。

修飾符可以串聯使用:

<a v-on:click.stop.prevent="doSomething"></a>

可以只有監聽的事件、修飾符,沒有表示式:

<form v-on:submit.prevent></form>

使用修飾符,順序要特別注意:
v-on:click.prevent.self ==>>防止所有點擊
v-on:click.self.prevent ==>>防止自身點擊

注意,不要串聯使用.passive與.prevent,兩者本相矛盾。

按鍵修飾符: 可以參考KeyboardEvent,把按鍵有效鍵名改成橫線連接符(kebab-case),例如:
v-on:keyup.page-down="onPageDownClick"
或用鍵盤鍵名代碼:
v-on:keyup.13="onKeyupEnter"

有任何問題歡迎下方留言,如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang


上一篇
Day13 指令大全:v-bind
下一篇
Day15 指令大全 v-show、v-html、v-text、v-pre、v-cloak、v-once
系列文
忍住不打牌位,只要30天VueJS帶你上A牌30

尚未有邦友留言

立即登入留言