简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  What events does vuejs support?

What events does vuejs support?

青灯夜游
青灯夜游Original
2021-11-01 12:12:093408browse

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 the v-on directive 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 nameWhen to triggerThe element gets focus (will not bubble). The element loses focus (will not bubble).
focus
blur

WebSocket event

##Event nameopenmessageerrorclose
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 nameWhen triggered ##pagehidepageshowpopstateCSS 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 nameWhen to triggeranimationstartanimationendanimationiterationCSS transition event
When a CSS animation starts trigger.
Fires when a CSS animation completes.
Triggered when a CSS animation is restarted after completion.

Event nameWhen to trigger ##transitionstartA 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 buttonClick the submit buttonPrint event
reset
submit

Time nameWhen to trigger

Trigger when the printer is readyTriggered when the printer is turned off
beforeprint
afterprint
<p><strong>文本写作事件</strong></p> <table> <thead><tr class="firstRow"> <th>Event Name</th> <th>Fired When</th> </tr></thead> <tbody> <tr> <td><code>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.

剪贴板事件

<tr> <td><code>cut
Event Name Fired When
已经剪贴选中的文本内容并且复制到了剪贴板。
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 a ScriptProcessorNode is 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 an OfflineAudioContext is terminated.
durationchange The duration attribute 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 the load() 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 A seek operation completed.
seeking A seek operation 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 the currentTime attribute 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. using AbortController.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 startedA web application is successfully installed as a progressive web app.##AudioProcessingEventScriptProcessorNodeaudioendEventaudiostartEventbeforeprintEventbeforeunloadBeforeUnloadEventbeginEvent TimeEvent##blockedAn open connection to a database is blocking a transaction on the same database.##blurThe spoken utterance reaches a word or sentence boundaryThe 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 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
audioprocess The input buffer of a can 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
The change,