ホームページ  >  記事  >  ウェブフロントエンド  >  vuejs はどのようなイベントをサポートしていますか?

vuejs はどのようなイベントをサポートしていますか?

青灯夜游
青灯夜游オリジナル
2021-11-01 12:12:093408ブラウズ

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
アンロード前
アンロード
#ネットワーク イベント

イベント名#online#オフライン#注目イベント
トリガーされるタイミング
ブラウザがネットワーク アクセスを取得しました。
ブラウザがネットワークにアクセスできなくなりました。

##イベント名

いつトリガーするかfocus要素はフォーカスを取得します (バブルは発生しません)。 要素はフォーカスを失います (バブルしません)。 ##イベント名
#blur
#WebSocket イベント

トリガーするタイミング

WebSocket 接続が確立されました。 #messageerrorclose#セッション履歴イベントトリガー時
open
WebSocket 経由でメッセージを受信しました。
WebSocket 接続が異常終了しました (たとえば、一部のデータを送信できませんでした)。
WebSocket 接続が閉じられました。
##イベント名

pagehideセッション履歴エントリが走査されています。pageshowpopstateCSS アニメーション イベントいつトリガーするか
セッション履歴エントリが次へ移動中です。
セッション履歴エントリ(特定の場合) に移動されます。
Event name

animationstartanimationendanimationiteration#CSS トランジション イベントイベント名トリガーするタイミング
CSS アニメーションがトリガーを開始するとき。
CSS アニメーションが完了すると起動されます。
CSS アニメーションが完了後に再開されるときにトリガーされます。

transitionstart

CSS トランジションが実際に開始されました (遅延後に起動されます)。transitioncancel#CSS トランジションがキャンセルされました。 CSS トランジションが完了しました。##transitionrun#フォームイベント##いつトリガーするかリセットボタンをクリックした場合
##transitionend
##CSS トランジションの実行が開始されました (遅延が開始される前に起動されました)。
##イベント名
reset

submit

送信ボタンをクリックしてくださいイベントを印刷いつトリガーするかプリンターの準備ができたらトリガー
時間名
印刷前

afterprint

プリンターの電源がオフになったときにトリガーされます

#本写作イベント

イベント名発生時期テキストの一節の構成が準備されます (キーボード入力のキーダウンに似ていますが、音声認識などの他の入力でも機能します)。 compositionupdatecompositionend ビュー画像イベント
compositionstart
作成中のテキストのパッセージに文字が追加されます。
#テキストの一節の構成が完了したか、キャンセルされました。

イベント名発生時期フルスクリーン変更全画面エラーresizescroll#剪断パネル イベント
要素が全画面モードになったか、通常モードに戻りました。
技術的な理由により、全画面モードに切り替えることができませんでしたまたは、アクセス許可が拒否されたためです。
ドキュメント ビューのサイズが変更されました。
ドキュメント ビューまたは要素がスクロールされました。

イベント名発生日時cut# 剪定プレートで作成されたテキストの内容が貼り付けられます。 ##键盘イベントイベント名発生時期 下の任意のボタン。
は、剪定オプション内のテキスト コンテンツを作成し、剪定パネルを作成しました。 #ペースト
keydown

keypressShift、Fn、CapsLock 以外の任意のボタン(継続的にハプニング。)keyupネズミ标イベント発生時期auxclick
任意のボタンを放します。
イベント名
ポインティング デバイス ボタン (プライマリ以外のボタン) が要素上で押されて放されました。

##クリックコンテキストメニューdblclick 要素上でマウスを選択します。mousemovemouseovermouseout#mouseuppointerlockchangepointerlockerror#ホイール任意の方向に移動します。ドラッグ正在拖動要素または文本选区(この過程中継続触発、每 350ms 触発一回)dragend拖放(ネズミのボタンまたは下の Esc ボタン)dragenter 操作された要素またはテキスト選択領域が有効解放に移動しました目标区
要素上で下に移動し、任意のマウスボタンを放します。
右ボタンポイント(右側のメニュー表示の前に起動)。
要素上のダブル マウス ボタン。 mousedown
mouseenter
#mouseleave 指は要素の範囲外に移動します (泡を冒さない)。
要素内で移動する際に継続的にトリガーを指示します。
は、イベント グループの要素またはその子要素内への移動を示します。
要素の移動、または
エレメント上でマウス ボタンを放します。
マウスロックが発生したか、ロックが解除されました。
いくつかの技術が原因で、マウス ロックが禁止されている可能性があります。
イベントを放ちます
イベント名 発生時期

dragstart

ユーザー開始アニメーションHTML要素または選択中の文 ##dragleave被動かされた要素または文本選択区からの移動対象の放物区dragoverアクティブなエレメントまたはテキスト選択領域が現在有効なリリース上で動作します (このプロセス中、継続的にトリガーされ、350 ミリ秒ごとにトリガーされます)drop元素在效释放目标区上释放

メディア イベント

ブラウザは、コンテンツのバッファリングのために停止することなくメディアを最後まで再生できると推定します。##durationchangedurationemptiedload()メディアの終わりに達したため、再生が停止しました。loadeddataメディアの最初のフレームのロードが完了しました。loadedmetadataメタデータがロードされました。pause再生が一時停止されました。play再生が開始されました。 seek 操作が完了しました。 操作が開始されました。 ##suspendtimeupdate 属性が更新されました。音量が変更されました。待機中进度イベントイベント名発生時期
イベント名 発生時期
audioprocess ScriptProcessorNode の入力バッファを処理する準備ができました。
canplay ブラウザはメディアを再生できますが、コンテンツをさらにバッファリングするために停止せずにメディアを最後まで再生するには十分なデータが読み込まれていないと推定されます。
#canplaythrough
##complete OfflineAudioContext のレンダリングが終了しました。
属性が更新されました。
メディアが空になりました。たとえば、このイベントは、メディアがすでにロードされている(または部分的にロードされている)場合に送信され、再ロードするために メソッドが呼び出されます。 ended
#再生中 #データ不足により一時停止または遅延された後、再生を開始する準備ができました。
ratechange 再生レートが変更されました。
seeked A
##seeking A seek
#stalled ユーザー エージェントはメディア データを取得しようとしていますが、予期せずデータが取得できません。
メディア データの読み込みが一時停止されました。
# で示される時間##currentTime
volumechange
データが一時的に不足したため、再生が停止しました。

中止進行は終了しました (エラーのためではありません)。エラー#loadloadendloadstart#進行中。事前に設定された時間が経過したため、進行は終了します。 ##change (「非標準イベント」を参照)ストレージチェック
進行は失敗しました。
進行は成功しました。
進行状況が停止しました (「エラー」、「中止」、または「ロード」がディスパッチされた後)。
進行状況が停止しました。開始しました。 #進捗状況
#タイムアウト
イベント#を更新

#ダウンロード

  • ##エラー

  • 更新なし

廃止されました

  • #更新準備完了

  • 值变化イベント

  • ##broadcast
  • CheckboxStateChange
  • hashchange
  • #input
  • RadioStateChange

readystatechange
  • ValueChange
  • 未分割のイベント

  • 無効な

  • メッセージ

  • メッセージ

  • #開く

  • #表示

#異常および非標準イベント

  • 中止可能な取得イベント

  • イベント名

  • abort

  • DOM リクエストが中止されたとき、つまり

    AbortController を使用したときに発生します。 。アボート()###。############

    SVGイベント

    • SVGAbort

    • SVGエラー

    • #SVGLoad

    • #SVGResize

    • SVGScroll

    • SVGUnload

    • ##SVGZoom
    • データベース イベント

      中止
    • ブロックされました
    • 完了
    • ##エラー
    • 成功
    • アップグレードが必要
    • ##バージョン変更

    • #スクリプト イベント

    ##afterscriptexecute

    • beforescriptexecute

    • メニュー イベント

    DOMMenuItemActive

    • DOMMenuItemInactive

    • ウィンドウ イベント

    close

    • ポップアップイベント

    ポップアップ非表示

    • ポップアップ非表示

    • ##ポップアップ表示
    • ##ポップアップ表示

    • ##タブイベント

    • 表示変更

    バッテリーイベント

    • #充電変更

    • ##充電時間変更

    #dischargingtimechange
    • levelchange
    • コールイベント
    • アラート中
    • ##忙しい

    callchanged

    • ##cfstatechange

    • connected

    • 接続中

    • ダイヤル中

    • 切断中

    • 切断中

    • ##エラー

    • #保留中
    • 保留中

    • ##受信

    • 再開中

    • 状態変化

      音声変化
    • センサー イベント
    • コンパスの調整が必要
    • デバイスモーション
    • デバイスの向き

    ##向きの変更

    • スマート カード イベント

    • #icccardlockerror

    • ##iccinfochange

    • #smartcard-insert

      ##smartcard-remove

    stkcommand
    • stksessionend
    • ##cardstatechange

    • SMS および USSD イベント

    • 配信済み

    • ##受信

    • sen

    • ##ussdreceived

    フレーム イベント

    • #mozbrowserclose

    • mozbrowsercontextmen

    • #mozbrowsererror
    • #mozbrowsericonchange
    • #mozbrowserlocationchange

    mozbrowserloadend

    • mozbrowserloadstart

    • mozbrowseropenwindow

    • ##mozbrowsersecuritychange

    • mozbrowsershowmodalprompt

    • mozbrowsertitlechange

    • ##DOM 変異イベント

    • DOMAttributeNameChanged

    • #DOMAttrModified

    • # DOMCharacterDataModified
    • DOMContentLoaded
    • ##DOMElementNameChanged

    • DOMNodeInserted

    DOMNodeInsertedIntoDocument

    • DOMNodeRemoved

    • DOMNodeRemovedFromDocument

    • DOMSubtreeModified

    • タッチイベント

    • ##touchcancel
    • ##タッチエンド
    • タッチムーブ
    • touchstart
    • ポインタ イベント
    • pointerover
    • ##pointerenter

    pointerdown

    • #pointermove

    • ポインタアップ

    • ポインタキャンセル

    • ポインタアウト

    • pointerleave

    • ##gotpointercapture

    • ##lostpointercapture

    • #標準イベント

    これらのイベントは公式 Web 仕様で定義されており、ブラウザー間で共通である必要があります。各イベントは、イベントの受信者を表すオブジェクト (各イベントによって提供されるデータを確認できるように)、およびイベントを定義する標準または標準リンクとともにリストされます。

    #イベント名イベント タイプトリガー タイミング...##abortUIEventabort#abortafterprintアニメーションキャンセルanimationendCSS アニメーションを繰り返す #animationstartAnimationEventイベント##AudioProcessingEventScriptProcessorNodeユーザー エージェントが音声認識のために音声をキャプチャしますユーザー エージェントが音声認識用の音声のキャプチャを開始します関連ドキュメントの印刷が開始されるか、印刷プレビューの準備が開始されますウィンドウ、ドキュメント、およびそのリソースがアンロードされようとしていますSMIL アニメーション要素が始まります。 トランザクションをブロックしています。blurFocusEvent##boundary再生可能canplaythrough##イベントchange
    リソースの読み込みが中止されました
    #ProgressEvent #進行状況が終了しました (エラーによるものではありません)
    イベント トランザクションは中止されました
    イベント 関連ドキュメントの印刷が開始されたか、印刷プレビューが閉じられました
    AnimationEvent CSS アニメーションが中止されました。
    AnimationEvent CSS アニメーションを完了する ##animationiteration
    AnimationEvent
    ##CSS アニメーションが開始されました #appinstalled
    Web アプリケーションがプログレッシブ Web アプリとして正常にインストールされました。 #audioprocess
    の入力バッファを処理できます #audioend イベント
    audiostart イベント
    beforeprint イベント
    beforeunload BeforeUnloadEvent
    beginEvent #TimeEvent
    ##ブロックされました #データベースへの開いた接続が、同じデータベース上の versionchange
    要素はフォーカスを失いました (バブルしません)。
    SpeechSynthesisEvent 音声が単語または文の境界に到達しました
    イベント ユーザー エージェントはメディアを再生できますが、コンテンツをさらにバッファリングするために停止せずにメディアを最後まで再生するには十分なデータがロードされていないと推定します。
    イベント ユーザー エージェントはメディアを停止することなく最後まで再生できますコンテンツをさらにバッファリングします。 ##change
    ユーザーが要素の値の変更をコミットすると、<input>、および