千家信息网

vuejs支持的事件有哪些

发表于:2025-11-08 作者:千家信息网编辑
千家信息网最后更新 2025年11月08日,本篇内容介绍了"vuejs支持的事件有哪些"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!vue支持的
千家信息网最后更新 2025年11月08日vuejs支持的事件有哪些

本篇内容介绍了"vuejs支持的事件有哪些"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

vue支持的事件:1、资源事件;2、网络事件;3、焦点事件;4、WebSocket事件;5、会话历史事件;6、CSS动画事件;7、CSS过渡事件;8、表单事件;9、打印事件;10、视图事件;11、键盘事件;12、鼠标事件;13、拖放事件等。

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

vuejs中可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

vue中v-on支持的事件总结

资源事件

事件名称何时触发
error资源加载失败时。
abort正在加载资源已经被中止时。
load资源及其相关资源已完成加载。
beforeunloadwindow,document 及其资源即将被卸载。
unload文档或一个依赖资源正在被卸载。

网络事件

事件名称何时触发
online浏览器已获得网络访问。
offline浏览器已失去网络访问。

焦点事件

事件名称何时触发
focus元素获得焦点(不会冒泡)。
blur元素失去焦点(不会冒泡)。

WebSocket 事件

事件名称何时触发
openWebSocket 连接已建立。
message通过 WebSocket 接收到一条消息。
errorWebSocket 连接异常被关闭(比如有些数据无法发送)。
closeWebSocket 连接已关闭。

会话历史事件

事件名称何时触发
pagehideA session history entry is being traversed from.
pageshowA session history entry is being traversed to.
popstateA session history entry is being navigated to (in certain cases).

CSS 动画事件

事件名称何时触发
animationstart某个 CSS 动画开始时触发。
animationend某个 CSS 动画完成时触发。
animationiteration某个 CSS 动画完成后重新开始时触发。

CSS 过渡事件

事件名称何时触发
transitionstartA CSS transition has actually started (fired after any delay).
transitioncancelA CSS transition has been cancelled.
transitionendA CSS transition has completed.
transitionrunA CSS transition has begun running (fired before any delay starts).

表单事件

事件名称何时触发
reset点击重置按钮时
submit点击提交按钮

打印事件

时间名称何时触发
beforeprint打印机已经就绪时触发
afterprint打印机关闭时触发

文本写作事件

Event NameFired When
compositionstartThe composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
compositionupdateA character is added to a passage of text being composed.
compositionendThe composition of a passage of text has been completed or canceled.

视图事件

Event NameFired When
fullscreenchangeAn element was turned to fullscreen mode or back to normal mode.
fullscreenerrorIt was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
resizeThe document view has been resized.
scrollThe document view or an element has been scrolled.

剪贴板事件

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

键盘事件

Event NameFired When
keydown按下任意按键。
keypress除 Shift、Fn、CapsLock 外的任意键被按住。(连续触发。)
keyup释放任意按键。

鼠标事件

Event NameFired When
auxclickA 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 NameFired When
drag正在拖动元素或文本选区(在此过程中持续触发,每 350ms 触发一次)
dragend拖放操作结束。(松开鼠标按钮或按下 Esc 键)
dragenter被拖动的元素或文本选区移入有效释放目标区
dragstart用户开始拖动HTML元素或选中的文本
dragleave被拖动的元素或文本选区移出有效释放目标区
dragover被拖动的元素或文本选区正在有效释放目标上被拖动 (在此过程中持续触发,每350ms触发一次)
drop元素在有效释放目标区上释放

媒体事件

Event NameFired When
audioprocessThe input buffer of a ScriptProcessorNode is ready to be processed.
canplayThe 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.
canplaythroughThe browser estimates it can play the media up to its end without stopping for content buffering.
completeThe rendering of an OfflineAudioContext is terminated.
durationchangeThe duration attribute has been updated.
emptiedThe 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.
endedPlayback has stopped because the end of the media was reached.
loadeddataThe first frame of the media has finished loading.
loadedmetadataThe metadata has been loaded.
pausePlayback has been paused.
playPlayback has begun.
playingPlayback is ready to start after having been paused or delayed due to lack of data.
ratechangeThe playback rate has changed.
seekedA seek operation completed.
seekingA seek operation began.
stalledThe user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
suspendMedia data loading has been suspended.
timeupdateThe time indicated by the currentTime attribute has been updated.
volumechangeThe volume has changed.
waitingPlayback has stopped because of a temporary lack of data.

进度事件

Event NameFired When
abortProgression has been terminated (not due to an error).
errorProgression has failed.
loadProgression has been successful.
loadendProgress has stopped (after "error", "abort" or "load" have been dispatched).
loadstartProgress has begun.
progressIn progress.
timeoutProgression 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 nameFired when
abortA DOM request is aborted, i.e. using 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

呼叫事件

  • 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

  • receive

  • sen

  • ussdreceived

帧事件

  • mozbrowserclose

  • mozbrowsercontextmenu

  • mozbrowsererror

  • mozbrowsericonchange

  • mozbrowserlocationchange

  • mozbrowserloadend

  • mozbrowserloadstart

  • mozbrowseropenwindow

  • mozbrowsersecuritychange

  • mozbrowsershowmodalprompt

  • mozbrowsertitlechange

DOM变异事件

  • DOMAttributeNameChanged

  • DOMAttrModified

  • DOMCharacterDataModified

  • DOMContentLoaded

  • DOMElementNameChanged

  • DOMNodeInserted

  • DOMNodeInsertedIntoDocument

  • DOMNodeRemoved

  • DOMNodeRemovedFromDocument

  • DOMSubtreeModified

触摸事件

  • touchcancel

  • touchend

  • touchmove

  • touchstart

指针事件

  • pointerover

  • pointerenter

  • pointerdown

  • pointermove

  • pointerup

  • pointercancel

  • pointerout

  • pointerleave

  • gotpointercapture

  • lostpointercapture

标准事件

这些事件在官方Web规范中定义,并且应在各个浏览器中通用。 每个事件都和代表事件接收方的对象(由此您可以查到每个事件提供的数据),定义这个事件的标准或标准链接会一起列出。

事件名称事件类型触发时机...
abortUIEvent资源载入已被中止
abortProgressEventProgress被终止(不是error造成的)
abortEvent事务已被中止
afterprintEvent相关文档已开始打印或打印预览已被关闭
animationcancelAnimationEventA CSS animation has aborted.
animationendAnimationEvent完成一个CSS 动画
animationiterationAnimationEvent重复播放一个CSS 动画
animationstartAnimationEvent一个 CSS 动画已开始
appinstalledEventA web application is successfully installed as a progressive web app.
audioprocessAudioProcessingEvent一个ScriptProcessorNode 的输入缓冲区可处理
audioendEvent用户代理捕捉到用以语音识别的音频
audiostartEvent用户代理开始捕捉用以语音识别的音频
beforeprintEvent相关文档将要开始打印或准备打印预览
beforeunloadBeforeUnloadEvent即将卸载 window,document 及其资源
beginEventTimeEventA SMIL animation element begins.
blocked
An open connection to a database is blocking a versionchange transaction on the same database.
blurFocusEventAn element has lost focus (does not bubble).
boundarySpeechSynthesisEventThe spoken utterance reaches a word or sentence boundary
canplayEventThe 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.
canplaythroughEventThe user agent can play the media up to its end without having to stop for further buffering of content.
changeEventThe change event is fired for ,