首頁  >  文章  >  web前端  >  vuejs支援哪些事件

vuejs支援哪些事件

青灯夜游
青灯夜游原創
2021-11-01 12:12:093394瀏覽

vue支援的事件:1、資源事件;2、網路事件;3、焦點事件;4、WebSocket事件;5、會話歷史事件;6、CSS動畫事件;7、CSS過渡事件;8 、表單事件;9、列印事件;10、視圖事件;11、鍵盤事件;12、滑鼠事件;13、拖曳事件等。

vuejs支援哪些事件

本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。

vuejs中可以用 v-on 指令監聽 DOM 事件,並在觸發時執行一些 JavaScript 程式碼。

vue中v-on支援的事件總結

資源事件

事件名稱 何時觸發
error #資源載入失敗時。
abort 正在載入資源已經被中止時。
load 資源及其相關資源已完成載入。
beforeunload window,document 及其資源即將被卸載。
unload 文件或一個依賴資源正在被卸載。

網路事件

#事件名稱 何時觸發
online 瀏覽器已獲得網路存取。
offline 瀏覽器已失去網路存取。

焦點事件

#事件名稱 何時觸發
focus 元素獲得焦點(不會冒泡)。
blur 元素失去焦點(不會冒泡)。

WebSocket 事件

#事件名稱 何時觸發
open WebSocket 連線已建立。
message 透過 WebSocket 接收到一則訊息。
error WebSocket 連線異常被關閉(例如有些資料無法傳送)。
close WebSocket 連線已關閉。

會話歷史事件

#A session history entry is being navigated to (in certain cases).
#事件名稱 何時觸發
pagehide #A session history entry is being traversed from.
#pageshow A session history entry is being traversed to.
##popstate

CSS 動畫事件

#animationstart某個CSS 動畫開始時觸發。 animationend某個 CSS 動畫完成時觸發。
##事件名稱 何時觸發

animationiteration

某個 CSS 動畫完成後重新開始時觸發。 CSS 過渡事件transitionstartA CSS transition has actually started (fired after any delay).#transitioncancelA CSS transition has been cancelled.transitionend #A CSS transition has completed.
#事件名稱 何時觸發

#transitionrun

A CSS transition has begun running (fired before any delay starts).表單事件
#事件名稱 何時觸發

#reset點選提交按鈕列印事件
點擊重置按鈕時 ##submit
###############列印事件##################時間名稱# #####何時觸發#####################beforeprint#########印表機已經就緒時觸發###### #########afterprint#########印表機關閉時觸發############

文字寫作事件

#一個字元被加入到正在撰寫的文字段落中。一段文字的構成已完成或取消。
事件名稱 觸發時間
compositionstart #準備一段文字的組合(類似於鍵盤輸入的按鍵,但適用於其他輸入,例如語音辨識)。
##compositionupdate
#compositionend

#檢視事件

觸發時間全螢幕變更某個元素已轉為全螢幕模式或返回正常模式。#由於技術原因無法切換到全螢幕模式或因為權限被拒絕。##文件檢視已調整大小。文件檢視或元素已捲動。
事件名稱
##全螢幕錯誤
##調整大小
scroll

##剪貼簿事件

##事件名稱##cut##copy貼上##鍵盤事件
觸發時間
已經把選取的文字內容複製到了剪貼簿。
已經把選取的文字內容複製到了剪貼簿
#從剪貼簿複製的文字內容被貼上。

##按下任意鍵。##keypress##keyup
##事件名稱 觸發時間
## keydown
#Shift、Fn、CapsLock 之外的任何鍵都被按住。(連續觸發。)

釋放任意按鍵。

#滑鼠事件auxclick#已在元素上按下並釋放定點設備按鈕(任何非主按鈕)。click##在元素上點擊並釋放任意滑鼠按鍵。#右鍵(在右鍵選單中顯示前觸發)。在元素上雙擊滑鼠按鈕。#指標移出元素範圍外(不冒泡)。##mousemove# #指標在元素內移動時持續觸發。指標移到有事件監聽的元素或它的子元素內部。指標移出元素,或移到它的子元素上。
事件名稱 觸發時間
contextmenu
#dblclick
##mousedown 在元素上點選任一滑鼠按鈕。
mouseenter #指標移出有事件監聽的元素範圍內。
##mouseleave
#mouseover
mouseout

#mouseup

在元素上釋放任意滑鼠按鍵。##滑鼠被鎖定或解除鎖定時。可能是因為一些技術的原因滑鼠鎖定被禁止時。##selectwheel拖放事件事件名稱#觸發時間#拖曳##dragenddragenter
pointerlockchange
##pointerlockerror
#有文字被選中。
#滾輪向任意方向滾動。
正在拖曳元素或文字選取區(在此過程中持續觸發,每350ms觸發一次)
#拖曳操作結束。(滑鼠按鈕或按Esc鍵)
被拖曳的元素或文字選取範圍移入有效釋放目標區#############dragstart####### #使用者開始拖曳HTML元素或選取的文字############# ##dragleave########被拖曳的元素或文字選取範圍移出釋放目標區### ###有效########dragover##########被拖曳的元素或文字選取範圍正在有效釋放目標上被拖曳(此過程中持續觸發,每350ms觸發一次)##############drop##### ####元素在有效釋放目標區域上釋放############

媒體事件

##ScriptProcessorNode## canplay##canplaythrough##瀏覽器估計它可以將媒體播放到底,而無需因內容緩衝而停止。#媒體已變空;例如,如果媒體已載入(或部分載入),則傳送此事件,並呼叫 load()##播放已停止,因為已到達媒體結尾。#媒體第一幀已完成載入。元資料已載入。##播放已暫停。##play##由於缺少資料而暫停或延遲後,播放已準備好開始。##已尋求seek##seeking 掛起# # 指示的時間##currentTime 屬性已更新。
事件名稱 #觸發時間
##audioprocess 的輸入緩衝區已準備好進行處理。
瀏覽器可以播放媒體,但估計尚未加載足夠的資料來將媒體播放到底,而無需停止進一步緩衝內容。
#complete
OfflineAudioContext 的渲染已終止。 #durationchange
duration 屬性已更新。 ##清空
方法來重新載入它。 END
#loadeddata
#loadedmetadata
#pause
##播放已開始。
播放已開始。
#正在播放
##ratechange 播放速率已更改。
##A  作業已完成。
##A seek 操作開始。
#用戶代理正在嘗試獲取媒體數據,但數據意外未獲取。
##媒體數據加載已暫停。 ##timeupdate

#volumechange#音量已更改。##由於暫時缺少數據,播放已停止。中止進程已終止(不是由於錯誤)。#進程失敗。
等待
進展事件
事件名稱 觸發時間
##錯誤
##load #進展已成功。
#loadend Progress 已停止(分派「error」、「abort」或「load」後)。

loadstart

#Progress has開始。
  • # 進度

  • ##進行中。
  • #逾時

因預設時間已到,進度終止。

  • 儲存事件

  • change(請參閱非標準事件)

  • ##儲存

  • 更新事件

  • 檢查

  • ##下載

    #錯誤
  • #無更新
  • ##已過時
  • #updateready
  • ##值變更事件

廣播

  • #CheckboxStateChange

  • hashchange

RadioStateChange

readystatechange

##ValueChange
############### ########未分類的事件############ ########無效###########################################訊息##################訊息#### ##############開啟########### #######顯示################ ####不常見和非標準事件##############Abortable Fetch事件##################事件名稱# ####當######################abort ##########DOM 要求中止時觸發,即使用###AbortController .abort()###.############

SVG 事件

  • SVGAbort

  • SVGError

  • #SVGLoad

  • #SVGResize

#SVGScroll
  • SVGUnload
  • SVGZoom
  • #資料庫事件
  • abort
  • blocked
  • complete
  • #error

  • success
  • upgradeneeded

versionchange
  • #腳本事件
  • #afterscriptexecute

  • # #beforescriptexecute

選單事件
  • DOMMenuItemActive

#DOMMenuItemInactive
  • #視窗事件
  • ##close

  • ##popuphidden

  • popuphiding

  • popupshowing

  • popupshown

  • #Tab 事件

  • #visibilitychange

  • ##電池事件

  • chargingchange

  • chargingtimechange

  • dischargingtimechange
  • #levelchange
  • ##levelchange

    呼叫事件
  • alerting
  • #busy
  • ##callschanged
  • cfstatechange
  • connected

  • #connecting

#dialing

  • # #disconnected

  • disconnecting

  • error

  • ##held

  • holding
  • #incoming
  • resuming
  • statechange
  • #voicechange

  • #感測器事件

  • #compassneedscalibration

  • devicemotion

  • deviceorientation

  • orientationchange

  • 智慧卡事件
  • icccardlockerror
  • iccinfochange
  • #smartcard-insert
  • #smartcard-remove

stkcommand
  • #stksessionend
  • cardstatechange
  • #簡訊與USSD事件
  • #delivered

  • #delivered

  • ##receive

  • sen

  • ussdreceived

  • ################# ############影格事件###################mozbrowserclose################################################################################################### #mozbrowsercontextmenu##################mozbrowsererror##################mozbrowsericonchange###################mozbrowsericonchange###################mozbrowsericonchange###################mozbrowsericonchange###################mozbrowsericonchange###################mozbrowsericonchange########### ########mozbrowserlocationchange##################mozbrowserloadend##################mozbrowserloadstart### ###############mozbrowseropenwindow##################mozbrowsersecuritychange################### ###mozbrowsershowmodalprompt##################mozbrowsertitlechange##################DOM變異事件####### ############DOMAttributeNameChanged###################DOMAttrModified#################### DOMCharacterDataModified##################DOMContentLoaded#################DOMElementNameChanged###################DOMElementNameChanged################## #######DOMNodeInserted##################DOMNodeInsertedIntoDocument##################DOMNodeRemoved#### ##############DOMNodeRemovedFromDocument##################DOMSubtreeModified################## ##觸碰事件##################touchcancel###################touchend########################################################################### ##########touchmove###################touchstart##################指標事件##################pointerover###################pointerenter############ ######pointerdown##################pointermove##################pointerup###### #
  • pointercancel

  • #pointerout

###################### pointerleave##################gotpointercapture#################lostpointercapture######################################################## ##########標準事件############這些事件在官方網頁規格中定義,並且應在各個瀏覽器中通用。每個事件都和代表事件接收方的物件(由此您可以查到每個事件提供的資料),定義這個事件的標準或標準連結會一起列出。 ###相關文件已開始列印或列印預覽已被關閉A CSS animation has aborted.##完成一個CSS 動畫# 重複播放一個CSS 動畫 一個 CSS 動畫已開始appinstalledEventaudioprocess  Event Event#相關文件將要開始列印或準備列印預覽#即將卸載window,document 及其資源A SMIL animation element begins.An open connection to a database is blocking a  transaction on the same database. SpeechSynthesisEventEventThe user agent can play the media up to its end without having to stop for further buffering of content.The , 
事件名稱 事件類型 觸發時機...
abort UIEvent 資源載入已中止
abort ProgressEvent Progress被終止(不是error造成的)
abort #Event 交易已中止
#afterprint ## Event
animationcancel AnimationEvent  
animationend AnimationEvent 
animationiteration AnimationEvent
animationstart #AnimationEvent
A web application is successfully installed as a progressive web app. ##AudioProcessingEvent
ScriptProcessorNode 的輸入緩衝區可處理 audioend
#用戶代理程式捕捉到以語音辨識的音訊 audiostart
#使用者代理程式開始捕捉使用語音辨識的音訊
##beforeprint Event
beforeunload BeforeUnloadEvent
#beginEvent TimeEvent
blocked   versionchange
#blur FocusEvent An element has lost focus (does not bubble).boundary 
The spoken utterance reaches a word or sentence boundary canplay
The user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. canplaythrough Event
change Event
change event is fired for