简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> Front-end Q&A> body text

What events does vuejs support?

青灯夜游
Release： 2021-11-01 12:13:24
Original
3368 people have browsed it

Vue supports events: 1. Resource events; 2. Network events; 3. Focus events; 4. WebSocket events; 5. Session history events; 6. CSS animation events; 7. CSS transition events; 8 , form events; 9. Print events; 10. View events; 11. Keyboard events; 12. Mouse events; 13. Drag and drop events, etc.

What events does vuejs support?

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

You can use thev-ondirective in vuejs to listen to DOM events and run some JavaScript code when triggered.

Summary of events supported by v-on in vue

Resource events

Event name When to trigger
error When resource loading fails.
abort When loading resources has been aborted.
load The resource and its related resources have been loaded.
beforeunload The window, document and its resources are about to be unloaded.
unload The document or a dependent resource is being unloaded.

Network event

Event name When is triggered
online The browser has gained network access.
offline The browser has lost network access.

Focus event

##Event name When to trigger The element gets focus (will not bubble). The element loses focus (will not bubble).
focus
blur

WebSocket event

##Event name open message error close
When to trigger
WebSocket connection established.
A message was received via WebSocket.
The WebSocket connection was closed abnormally (for example, some data could not be sent).
The WebSocket connection has been closed.
Session history event

##Event name When triggered ##pagehide pageshow popstate CSS animation event
A session history entry is being traversed from.
A session history entry is being traversed to.
A session history entry is being navigated to (in certain cases).

Event name When to trigger animationstart animationend animationiteration CSS transition event
When a CSS animation starts trigger.
Fires when a CSS animation completes.
Triggered when a CSS animation is restarted after completion.

Event name When to trigger ##transitionstart A CSS transition has actually started (fired after any delay). A CSS transition has been canceled. A CSS transition has completed. ##transitionrun ##A CSS transition has begun running (fired before any delay starts). Form event
transitioncancel
transitionend

Event nameWhen to trigger

When clicking the reset button Click the submit button Print event
reset
submit

Time nameWhen to trigger

Trigger when the printer is ready Triggered when the printer is turned off
beforeprint
afterprint

文本写作事件

Event Name Fired When
compositionstart The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
compositionupdate A character is added to a passage of text being composed.
compositionend The composition of a passage of text has been completed or canceled.

视图事件

Event Name Fired When
fullscreenchange An element was turned to fullscreen mode or back to normal mode.
fullscreenerror It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
resize The document view has been resized.
scroll The document view or an element has been scrolled.

剪贴板事件

Event Name Fired When
cut
已经剪贴选中的文本内容并且复制到了剪贴板。
copy 已经把选中的文本内容复制到了剪贴板。
paste 从剪贴板复制的文本内容被粘贴。

键盘事件

Event Name Fired When
keydown 按下任意按键。
keypress 除 Shift、Fn、CapsLock 外的任意键被按住。（连续触发。）
keyup 释放任意按键。

鼠标事件

Event Name Fired When
auxclick A pointing device button (ANY non-primary button) has been pressed and released on an element.
click 在元素上按下并释放任意鼠标按键。
contextmenu 右键点击（在右键菜单显示前触发）。
dblclick 在元素上双击鼠标按钮。
mousedown 在元素上按下任意鼠标按钮。
mouseenter 指针移到有事件监听的元素内。
mouseleave 指针移出元素范围外（不冒泡）。
mousemove 指针在元素内移动时持续触发。
mouseover 指针移到有事件监听的元素或者它的子元素内。
mouseout 指针移出元素，或者移到它的子元素上。
mouseup 在元素上释放任意鼠标按键。
pointerlockchange 鼠标被锁定或者解除锁定发生时。
pointerlockerror 可能因为一些技术的原因鼠标锁定被禁止时。
select 有文本被选中。
wheel 滚轮向任意方向滚动。

拖放事件

Event Name Fired When
drag 正在拖动元素或文本选区（在此过程中持续触发，每 350ms 触发一次）
dragend 拖放操作结束。（松开鼠标按钮或按下 Esc 键）
dragenter 被拖动的元素或文本选区移入有效释放目标区
dragstart 用户开始拖动HTML元素或选中的文本
dragleave 被拖动的元素或文本选区移出有效释放目标区
dragover 被拖动的元素或文本选区正在有效释放目标上被拖动 （在此过程中持续触发，每350ms触发一次）
drop 元素在有效释放目标区上释放

媒体事件

Event Name Fired When
audioprocess The input buffer of aScriptProcessorNodeis ready to be processed.
canplay The browser 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 The browser estimates it can play the media up to its end without stopping for content buffering.
complete The rendering of anOfflineAudioContextis terminated.
durationchange Thedurationattribute has been updated.
emptied The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and theload()method is called to reload it.
ended Playback has stopped because the end of the media was reached.
loadeddata The first frame of the media has finished loading.
loadedmetadata The metadata has been loaded.
pause Playback has been paused.
play Playback has begun.
playing Playback is ready to start after having been paused or delayed due to lack of data.
ratechange The playback rate has changed.
seeked Aseekoperation completed.
seeking Aseekoperation began.
stalled The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
suspend Media data loading has been suspended.
timeupdate The time indicated by thecurrentTimeattribute has been updated.
volumechange The volume has changed.
waiting Playback has stopped because of a temporary lack of data.

进度事件

Event Name Fired When
abort Progression has been terminated (not due to an error).
error Progression has failed.
load Progression has been successful.
loadend Progress has stopped (after "error", "abort" or "load" have been dispatched).
loadstart Progress has begun.
progress In progress.
timeout Progression is terminated due to preset time expiring.

存储事件

  • change(see Non-standard events)

  • storage

更新事件

  • checking

  • downloading

  • error

  • noupdate

  • obsolete

  • updateready

值变化事件

  • broadcast

  • CheckboxStateChange

  • hashchange

  • input

  • RadioStateChange

  • readystatechange

  • ValueChange

未分类的事件

  • invalid

  • message

  • message

  • open

  • show

不常见和非标准事件

Abortable Fetch events

Event name Fired when
abort A DOM request is aborted, i.e. usingAbortController.abort().

SVG Event

  • SVGAbort

  • SVGError

  • SVGLoad

  • SVGResize

  • SVGScroll

  • SVGUnload

  • ##SVGZoom

Database Event

  • abort

  • blocked

  • complete

  • ##error

  • success

  • upgradeneeded

    • ##versionchange

    • Script event

##afterscriptexecute

  • beforescriptexecute

  • Menu Event

DOMMenuItemActive

  • DOMMenuItemInactive

  • Window Event

close

  • Popup event

popuphidden

  • popuphiding

  • popupshowing

  • popupshown

  • Tab event

visibilitychange

  • Battery events

chargingchange

  • ##chargingtimechange

  • dischargingtimechange

  • levelchange

  • Call event

alerting

  • ##busy

  • callschanged

  • ##cfstatechange

  • connected

  • connecting

  • dialing

  • disconnected

  • ##disconnecting

    • ##error

    • held
  • ,

    holding

  • ##incoming

    resuming

  • statechange

  • voicechange

  • Sensor events

  • compassneedscalibration

devicemotion

  • deviceorientation

  • ##orientationchange

  • Smart Card Event

  • icccardlockerror

##iccinfochange

  • smartcard-insert

  • ##smartcard-remove

  • stkcommand

  • stksessionend

  • ##cardstatechange

  • SMS and USSD events

  • delivered

    • ##receive

    sen

  • ##ussdreceived

  • Frame events

  • mozbrowserclose

  • mozbrowsercontextmenu

##mozbrowsererror

  • #mozbrowsericonchange

  • mozbrowserlocationchange

  • mozbrowserloadend

  • mozbrowserloadstart

  • mozbrowseropenwindow

  • ##mozbrowsersecuritychange

  • mozbrowsershowmodalprompt

  • mozbrowsertitlechange

  • ##DOM Mutation Event

  • DOMAttributeNameChanged

  • DOMAttrModified

DOMCharacterDataModified

    ##DOMContentLoaded

  • #DOMElementNameChanged

  • DOMNodeInserted

  • DOMNodeInsertedIntoDocument

  • DOMNodeRemoved

  • DOMNodeRemovedFromDocument

  • ##DOMSubtreeModified

  • Touch event

  • ##touchcancel

  • ##touchend

  • touchmove

touchstart

  • Pointer event

  • pointerover

  • ##pointerenter

  • pointerdown

    • ##pointermove

    pointerup

  • pointercancel

  • pointerout

  • pointerleave

  • ##gotpointercapture

  • lostpointercapture

Standard Events

These events are defined in the official web specifications and should be universal across browsers. Each event is listed together with an object that represents the recipient of the event (so you can check the data provided by each event), and the standard or standard link that defines the event.

Repeat a CSS animation A CSS animation has started A web application is successfully installed as a progressive web app. ##AudioProcessingEvent ScriptProcessorNode audioend Event audiostart Event beforeprint Event beforeunload BeforeUnloadEvent beginEvent TimeEvent ##blocked An open connection to a database is blocking a transaction on the same database. ##blur The spoken utterance reaches a word or sentence boundary 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. The user agent can play the media up to its end without having to stop for further buffering of content. ##change ##Event event is fired for , and Event Event attribute has been updated. MouseEvent Event A transaction successfully completed. OfflineAudioCompletionEvent is terminated. ##CompositionEvent CompositionEvent CompositionEvent MouseEvent The text selection has been added to the clipboard.
Event name Event type Trigger timing...
abort UIEvent Resource loading has been aborted
abort ProgressEvent Progress was terminated (not caused by error)
abort Event Transaction has been aborted
afterprint Event The related document has started printing or the print preview has been closed
animationcancel AnimationEvent A CSS animation has aborted.
animationend AnimationEvent Complete a CSS animation
##animationiteration AnimationEvent
animationstart AnimationEvent
appinstalled Event
audioprocessThe input buffer of acan be processed
User agent captures audio for speech recognition
User agent starts capturing audio for speech recognition
The related document will start printing or prepare for print preview
The window, document and its resources are about to be unloaded
A SMIL animation element begins.
versionchange
FocusEvent An element has lost focus (does not bubble). ##boundary
SpeechSynthesisEvent canplay
Event canplaythrough
Event
Thechange,elements when a change to the element's value is committed by the user.chargingchange
The battery begins or stops charging . chargingtimechange
ThechargingTime click
A pointing device button has been pressed and released on an element. close
A WebSocket connection has been closed. complete
complete
The rendering of anOfflineAudioContext compositionend
The composition of a passage of text has been completed or canceled. compositionstart
The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition). compositionupdate
A character is added to a passage of text being composed. contextmenu
The right button of the mouse is clicked (before the context menu is displayed). copy ##ClipboardEvent
cut ClipboardEvent The text selection has been removed from the document and added to the clipboard.
dblclick MouseEvent A pointing device button is clicked twice on an element.
devicechange Event A media device such as a camera, microphone, or speaker is connected or removed from the system.
devicemotion DeviceMotionEvent Fresh data is available from a motion sensor.
deviceorientation DeviceOrientationEvent Fresh data is available from an orientation sensor.
dischargingtimechange Event ThedischargingTimeattribute has been updated.
DOMActivate UIEvent A button, link or state changing element is activated (useclickinstead).
DOMAttributeNameChanged MutationNameEvent The name of an attribute changed (use mutation observers instead).
DOMAttrModified MutationEvent The value of an attribute has been modified (use mutation observers instead).
DOMCharacterDataModified MutationEvent A text or another CharacterData has changed (use mutation observers instead).
DOMContentLoaded Event The document has finished loading (but not its dependent resources).
DOMElementNameChanged MutationNameEvent The name of an element changed (use mutation observers instead).
DOMFocusIn FocusEvent An element has received focus (usefocusorfocusininstead).
DOMFocusOut FocusEvent An element has lost focus (useblurorfocusoutinstead).
DOMNodeInserted MutationEvent A node has been added as a child of another node (use mutation observers instead).
DOMNodeInsertedIntoDocument MutationEvent A node has been inserted into the document (use mutation observers instead).
DOMNodeRemoved MutationEvent A node has been removed from its parent node (use mutation observers instead).
DOMNodeRemovedFromDocument MutationEvent A node has been removed from the document (use mutation observers instead).
DOMSubtreeModified MutationEvent A change happened in the document (use mutation observers instead).
drag DragEvent An element or text selection is being dragged (every 350ms).
dragend DragEvent A drag operation is being ended (by releasing a mouse button or hitting the escape key).
dragenter DragEvent A dragged element or text selection enters a valid drop target.
dragleave DragEvent A dragged element or text selection leaves a valid drop target.
dragover DragEvent An element or text selection is being dragged over a valid drop target (every 350ms).
dragstart DragEvent The user starts dragging an element or text selection.
drop DragEvent An element is dropped on a valid drop target.
durationchange Event Thedurationattribute has been updated.
emptied Event The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and theload()method is called to reload it.
end Event The speech recognition service has disconnected.
end SpeechSynthesisEvent The utterance has finished being spoken.
ended Event Playback has stopped because the end of the media was reached.
ended Event Playback has stopped because the end of the media was reached.
endEvent TimeEvent A SMIL animation element ends.
error UIEvent A resource failed to load.
error ProgressEvent Progression has failed.
error Event A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).
error Event An event source connection has been failed.
error Event A request caused an error and failed.
error Event A speech recognition error occurs.
error SpeechSynthesisErrorEvent An error occurs that prevents the utterance from being successfully spoken.
focus FocusEvent An element has received focus (does not bubble).
focusin FocusEvent An element is about to receive focus (bubbles).
focusout FocusEvent An element is about to lose focus (bubbles).
fullscreenchange Event An element was turned to fullscreen mode or back to normal mode.
fullscreenerror Event It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
gamepadconnected GamepadEvent A gamepad has been connected.
gamepaddisconnected GamepadEvent A gamepad has been disconnected.
gotpointercapture PointerEvent Element receives pointer capture.
hashchange HashChangeEvent The fragment identifier of the URL has changed (the part of the URL after the #).
lostpointercapture PointerEvent Element lost pointer capture.
input Event The value of an element changes or the content of an element with the attribute contenteditable is modified.
invalid Event A submittable element has been checked and doesn't satisfy its constraints.
keydown KeyboardEvent A key is pressed down.
keypress KeyboardEvent A key is pressed down and that key normally produces a character value (use input instead).
keyup KeyboardEvent A key is released.
languagechange Event The user's preferred languages have changed.
levelchange Event Thelevelattribute has been updated.
load UIEvent A resource and its dependent resources have finished loading.
load ProgressEvent Progression has been successful.
loadeddata Event The first frame of the media has finished loading.
loadedmetadata Event The metadata has been loaded.
loadend ProgressEvent Progress has stopped (after "error", "abort" or "load" have been dispatched).
loadstart ProgressEvent Progress has begun.
mark SpeechSynthesisEvent The spoken utterance reaches a named SSML "mark" tag.
message MessageEvent A message is received through a WebSocket.
message MessageEvent A message is received from a Web Worker.
message MessageEvent A message is received from a child (i)frame or a parent window.
message MessageEvent A message is received through an event source.
messageerror MessageEvent A message error is raised when a message is received by an object.
message ServiceWorkerMessageEventorExtendableMessageEvent, depending on context. A message is received from a service worker, or a message is received in a service worker from another context.
mousedown MouseEvent A pointing device button (usually a mouse) is pressed on an element.
mouseenter MouseEvent A pointing device is moved onto the element that has the listener attached.
mouseleave MouseEvent A pointing device is moved off the element that has the listener attached.
mousemove MouseEvent A pointing device is moved over an element.
mouseout MouseEvent A pointing device is moved off the element that has the listener attached or off one of its children.
mouseover MouseEvent A pointing device is moved onto the element that has the listener attached or onto one of its children.
mouseup MouseEvent A pointing device button is released over an element.
nomatch SpeechRecognitionEvent The speech recognition service returns a final result with no significant recognition.
notificationclick NotificationEvent A system notification spawned byServiceWorkerRegistration.showNotification()has been clicked.
offline Event The browser has lost access to the network.
online Event The browser has gained access to the network (but particular websites might be unreachable).
open Event A WebSocket connection has been established.
open Event An event source connection has been established.
orientationchange Event The orientation of the device (portrait/landscape) has changed
pagehide PageTransitionEvent A session history entry is being traversed from.
pageshow PageTransitionEvent A session history entry is being traversed to.
paste ClipboardEvent Data has been transferred from the system clipboard to the document.
pause Event Playback has been paused.
pause SpeechSynthesisEvent The utterance is paused part way through.
pointercancel PointerEvent The pointer is unlikely to produce any more events.
pointerdown PointerEvent The pointer enters the active buttons state.
pointerenter PointerEvent Pointing device is moved inside the hit-testing boundary.
pointerleave PointerEvent Pointing device is moved out of the hit-testing boundary.
pointerlockchange Event The pointer was locked or released.
pointerlockerror Event It was impossible to lock the pointer for technical reasons or because the permission was denied.
pointermove PointerEvent The pointer changed coordinates.
pointerout PointerEvent The pointing device moved out of hit-testing boundary or leaves detectable hover range.
pointerover PointerEvent The pointing device is moved into the hit-testing boundary.
pointerup PointerEvent The pointer leaves the active buttons state.
play Event Playback has begun.
playing Event Playback is ready to start after having been paused or delayed due to lack of data.
popstate PopStateEvent A session history entry is being navigated to (in certain cases).
progress ProgressEvent In progress.
push PushEvent A Service Worker has received a push message.
pushsubscriptionchange PushEvent A PushSubscription has expired.
ratechange Event The playback rate has changed.
readystatechange Event The readyState attribute of a document has changed.
repeatEvent TimeEvent A SMIL animation element is repeated.
reset Event A form is reset.
resize UIEvent The document view has been resized.
resourcetimingbufferfull Performance The browser's resource timing buffer is full.
result SpeechRecognitionEvent The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.
resume SpeechSynthesisEvent A paused utterance is resumed.
scroll UIEvent The document view or an element has been scrolled.
seeked Event Aseekoperation completed.
seeking Event Aseekoperation began.
select UIEvent Some text is being selected.
selectstart Event A selection just started.
selectionchange Event The selection in the document has been changed.
show MouseEvent A contextmenu event was fired on/bubbled to an element that has a contextmenu attribute
slotchange Event The node contents of aHTMLSlotElement() have changed.
soundend Event Any sound — recognisable speech or not — has stopped being detected.
soundstart Event Any sound — recognisable speech or not — has been detected.
speechend Event Speech recognised by the speech recognition service has stopped being detected.
speechstart Event Sound that is recognised by the speech recognition service as speech has been detected.
stalled Event The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
start Event The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the currentSpeechRecognition.
start SpeechSynthesisEvent The utterance has begun to be spoken.
storage StorageEvent A storage area (localStorage or sessionStorage) has changed.
submit Event A form is submitted.
success Event A request successfully completed.
suspend Event Media data loading has been suspended.
SVGAbort SVGEvent Page loading has been stopped before the SVG was loaded.
SVGError SVGEvent An error has occurred before the SVG was loaded.
SVGLoad SVGEvent An SVG document has been loaded and parsed.
SVGResize SVGEvent An SVG document is being resized.
SVGScroll SVGEvent An SVG document is being scrolled.
SVGUnload SVGEvent An SVG document has been removed from a window or frame.
SVGZoom SVGZoomEvent An SVG document is being zoomed.
timeout ProgressEvent
timeupdate Event The time indicated by thecurrentTimeattribute has been updated.
touchcancel TouchEvent A touch point has been disrupted in an implementation-specific manners (too many touch points for example).
touchend TouchEvent A touch point is removed from the touch surface.
touchmove TouchEvent A touch point is moved along the touch surface.
touchstart TouchEvent A touch point is placed on the touch surface.
transitionend TransitionEvent A CSS transition has completed.
unload UIEvent The document or a dependent resource is being unloaded.
upgradeneeded An attempt was made to open a database with a version number higher than its current version. Aversionchangetransaction has been created.
userproximity UserProximityEvent Fresh data is available from a proximity sensor (indicates whether the nearby object isnearthe device or not).
voiceschanged Event The list ofSpeechSynthesisVoiceobjects that would be returned by theSpeechSynthesis.getVoices()method has changed (when thevoiceschangedevent fires.)
versionchange Aversionchangetransaction completed.
visibilitychange Event The content of a tab has become visible or has been hidden.
volumechange Event The volume has changed.
waiting Event Playback has stopped because of a temporary lack of data.
wheel WheelEvent A wheel button of a pointing device is rotated in any direction.

非标准事件

Event Name Event Type Fired when...
afterscriptexecute Event A script has been executed.
beforescriptexecute Event A script is about to be executed.
beforeinstallprompt Event A user is prompted to save a web site to a home screen on mobile.
cardstatechange TheMozMobileConnection.cardStateproperty changes value.
change DeviceStorageChangeEvent This event is triggered each time a file is created, modified or deleted on a given storage area.
connectionInfoUpdate The informations about the signal strength and the link speed have been updated.
cfstatechange The call forwarding state changes.
datachange TheMozMobileConnection.dataobject changes values.
dataerror TheMozMobileConnection.dataobject receive an error from the RIL.
DOMMouseScroll The wheel button of a pointing device is rotated (detail attribute is a number of lines). (usewheelinstead)
dragdrop DragEvent An element is dropped (usedropinstead).
dragexit DragEvent A drag operation is being ended(usedragendinstead).
draggesture DragEvent The user starts dragging an element or text selection (usedragstartinstead).
icccardlockerror theMozMobileConnection.unlockCardLock()orMozMobileConnection.setCardLock()methods fails.
iccinfochange TheMozMobileConnection.iccInfoobject changes.
localized The page has been localized using data-l10n-* attributes.
mousewheel The wheel button of a pointing device is rotated.
MozAudioAvailable Event The audio buffer is full and the corresponding raw samples are available.
MozBeforeResize A window is about to be resized.
mozbrowseractivitydone Sent when some activity has been completed (complete description TBD.)
mozbrowserasyncscroll Sent when the scroll position within a browser