iT邦幫忙

2025 iThome 鐵人賽

DAY 5
0

Vue中的事件類型

  • 事件本身是有類型之分的,使用@click綁定的就是元素的點擊事件,如果需要透過使用者滑鼠操作行為來實現更加複雜的互動邏輯,則需要監聽更加複雜的滑鼠事件。
  • 使用v-on指令進行綁定時,支援所有的原生DOM事件,甚至如果使用v-on指令對自訂的Vue元件近行事件綁定,則也可以支援自訂的事件。

常用的事件類型

事件 意義 可用的元素
click 點擊事件,當元件被點擊時觸發 大部分HTML元素
dblclick 按兩下事件,當元件被按兩下時觸發 大部分HTML元素
focus 獲取焦點事件,例如輸入框開啟編輯模式時觸發 input、select、textarea等
blur 失去焦點事件,例如輸入框結束編輯模式時觸發 input、select、textarea等
change 元素內容改變事件,輸入框結束輸入後,如果內容有變化,就會觸發此事件 input、select、textarea等
select 元素內容選中事件,輸入框中的文字被選中時會觸發此事件 input、select、textarea等
mousedown 滑鼠按鍵被按下事件 大部分HTML元素
mouseup 滑鼠按鍵抬起事件 大部分HTML元素
mousemove 滑鼠在元件內石洞事件 大部分HTML元素
mouseout 滑鼠移出元件時觸發 大部分HTML元素
mouseover 滑鼠移入元件時觸發 大部分HTML元素
keydown 鍵盤按鍵被按下 HTML中所有表單類別元素
keyup 鍵盤按鍵被抬起 HTML中所有表單類別元素

  • 今天就先熟悉熟悉著個常用事件類型的表格,明天將會撰寫一個範例程式來幫助理解其觸發時機。

上一篇
Day 4
系列文
從零開始學習TypeScript、Vue.js !!5
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言