简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > 前端问答 > 正文

vuejs支持哪些事件

青灯夜游
发布： 2021-11-01 12:13:24
原创
3304 人浏览过

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 连接已关闭。

会话历史事件

事件名称 何时触发
pagehide A session history entry is being traversed from.
pageshow A session history entry is being traversed to.
popstate A session history entry is being navigated to (in certain cases).

CSS 动画事件

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

CSS 过渡事件

事件名称 何时触发
transitionstart A CSS transition has actually started (fired after any delay).
transitioncancel A 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 打印机关闭时触发

文本写作事件

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 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 事件

  • 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规范中定义，并且应在各个浏览器中通用。 每个事件都和代表事件接收方的对象（由此您可以查到每个事件提供的数据），定义这个事件的标准或标准链接会一起列出。

事件名称 事件类型 触发时机...
abort UIEvent 资源载入已被中止
abort ProgressEvent Progress被终止(不是error造成的)
abort Event 事务已被中止
afterprint Event 相关文档已开始打印或打印预览已被关闭
animationcancel AnimationEvent  A CSS animation has aborted.
animationend AnimationEvent  完成一个CSS 动画
animationiteration AnimationEvent  重复播放一个CSS 动画
animationstart AnimationEvent  一个 CSS 动画已开始
appinstalled Event A web application is successfully installed as a progressive web app.
audioprocess AudioProcessingEvent  一个ScriptProcessorNode 的输入缓冲区可处理
audioend  Event 用户代理捕捉到用以语音识别的音频
audiostart  Event 用户代理开始捕捉用以语音识别的音频
beforeprint Event 相关文档将要开始打印或准备打印预览
beforeunload BeforeUnloadEvent 即将卸载 window，document 及其资源
beginEvent TimeEvent A SMIL animation element begins.
blocked   An open connection to a database is blocking a versionchange transaction on the same database.
blur FocusEvent  An element has lost focus (does not bubble).
boundary  SpeechSynthesisEvent The spoken utterance reaches a word or sentence boundary
canplay Event 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 The user agent can play the media up to its end without having to stop for further buffering of content.
change Event The change event is fired for ,