【Blazor】 DOMイベント一覧
- DOM（Document Object Model）とは？
- BlazorのDOMイベント一覧
目次
DOM（Document Object Model）とは？
ウェブページを作る際に使われる、HTMLやXML文書の内容と構造を表現するための仕組みのことです。
簡単に言えば、ウェブページの各要素（例：テキスト、画像、リンクなど）にプログラムからアクセスしたり、変更したりするためのものです。
この仕組みによって、プログラミング言語を使用して、ウェブページの要素にアクセスしたり、 新しい要素を追加/削除したり、内容やスタイルを変更したりすることが可能になります。
BlazorのDOMイベント一覧
Blazorで使用できるDOMイベント名とその発生条件について、表にまとめてみました。
| イベント名 | イベント発生条件 |
|---|---|
| onabort | 要素の読み込みが中止されたとき |
| onactivate | 要素がアクティブになったとき |
| onbeforeactivate | 要素がアクティブになる直前 |
| onbeforecopy | 要素の内容がコピーされる前 |
| onbeforecut | 要素の内容がカットされる前 |
| onbeforedeactivate | 要素のアクティブが失われる直前 |
| onbeforepaste | 要素の内容が貼り付けられる前 |
| onblur | 要素からフォーカスが移動したとき |
| oncanplay | メディアが再生可能になったとき |
| oncanplaythrough | メディアが最後まで遅延なく再生可能なとき |
| onchange | 要素の内容が変更されたとき |
| onclick | 要素がクリックされたとき |
| oncontextmenu | 要素上でコンテキストメニューが開かれたとき |
| oncopy | 要素の内容がコピーされたとき |
| oncuechange | トラック要素のキューが変更されたとき |
| oncut | 要素の内容がカットされたとき |
| ondblclick | 要素がダブルクリックされたとき |
| ondeactivate | 要素のアクティブが失われたとき |
| ondrag | 要素がドラッグ中 |
| ondragend | 要素のドラッグが終了したとき |
| ondragenter | ドラッグされた要素がドロップターゲットに入ったとき |
| ondragleave | ドラッグされた要素がドロップターゲットから出たとき |
| ondragover | 要素上でドラッグされている間 |
| ondragstart | 要素のドラッグが開始されたとき |
| ondrop | ドラッグされた要素がドロップターゲットにドロップされたとき |
| ondurationchange | メディアの再生時間が変更されたとき |
| onemptied | メディアが空になったとき (例: エラーでの読み込み失敗) |
| onended | メディアの再生が終了したとき |
| onerror | 要素の読み込み等でエラーが発生したとき |
| onfocus | 要素にフォーカスが移動したとき |
| onfocusin | 要素かその子孫にフォーカスが移動したとき |
| onfocusout | 要素かその子孫からフォーカスが移動したとき |
| onfullscreenchange | 要素のフルスクリーン表示状態が変更されたとき |
| onfullscreenerror | フルスクリーン表示の要求にエラーが生じたとき |
| ongotpointercapture | 要素がポインタキャプチャを取得したとき |
| oninput | 要素の値がユーザによって変更されたとき |
| oninvalid | 要素が無効なときに送信を試みたとき |
| onkeydown | キーが押されている間 |
| onkeypress | キーが押されたとき |
| onkeyup | キーが離されたとき |
| onload | 要素が正常に読み込まれたとき |
| onloadeddata | メディアの一部のデータが読み込まれたとき |
| onloadedmetadata | メディアのメタデータが読み込まれたとき |
| onloadend | リソースの読み込みが完了したとき |
| onloadstart | 要素が読み込みを開始したとき |
| onlostpointercapture | 要素がポインタキャプチャを失ったとき |
| onmousedown | マウスボタンが押されたとき |
| onmousemove | マウスが要素上で移動したとき |
| onmouseout | マウスが要素から外れたとき |
| onmouseover | マウスが要素の上に移動したとき |
| onmouseup | マウスボタンが離されたとき |
| onmousewheel | マウスホイールが回転されたとき (非標準、代わりにonwheelを使用) |
| onpaste | 要素にテキストがペーストされたとき |
| onpause | メディアの再生が一時停止されたとき |
| onplay | メディアの再生が開始されたとき |
| onplaying | メディアの再生が進行中とき |
| onpointercancel | ポインティングデバイスの操作が中断されたとき |
| onpointerdown | ポインティングデバイスが要素上で押されたとき |
| onpointerenter | ポインティングデバイスが要素の境界を越えて移動したとき |
| onpointerleave | ポインティングデバイスが要素の境界を越えて外れたとき |
| onpointerlockchange | ポインタのロック状態が変更されたとき |
| onpointerlockerror | ポインタのロックに関するエラーが発生したとき |
| onpointermove | ポインティングデバイスが要素上で移動したとき |
| onpointerout | ポインティングデバイスが要素の直下から外れたとき |
| onpointerover | ポインティングデバイスが要素の直上に移動したとき |
| onpointerup | ポインティングデバイスが要素上で放されたとき |
| onprogress | 要素の読み込み中に定期的に発生 |
| onratechange | メディアの再生速度または逆再生速度が変更されたとき |
| onreadystatechange | 要素のreadyState属性が変更されたとき |
| onreset | フォームがリセットされたとき |
| onscroll | 要素にスクロールが発生したとき |
| onseeked | メディアが新しい再生位置に移動された後 |
| onseeking | メディアが新しい再生位置に移動するとき |
| onselect | 要素内のテキストが選択されたとき |
| onselectionchange | 要素内の選択範囲が変更されたとき |
| onselectstart | 要素上でのテキストの選択が開始されたとき |
| onstalled | メディアの読み込みが中断されたとき |
| onstop | ユーザエージェントが読み込みを停止したとき (非標準) |
| onsubmit | フォームが送信されるとき |
| onsuspend | メディアの読み込みが一時的に中断されたとき |
| ontimeout | リクエストがタイムアウトしたとき (非標準) |
| ontimeupdate | メディアの現在の再生位置が更新されたとき |
| ontoggle | <details>要素の開閉状態が変更されたとき |
| ontouchcancel | タッチがキャンセルされたとき (例: タッチが多すぎるとき) |
| ontouchend | 指がタッチサーフェスから離れたとき |
| ontouchenter | 指が要素の境界を越えて要素の上に移動したとき |
| ontouchleave | 指が要素の境界を越えて要素から離れたとき |
| ontouchmove | 指がタッチサーフェス上で移動したとき |
| ontouchstart | タッチサーフェスに指が触れたとき |
| onvolumechange | メディアの音量が変更されたとき、または音声がミュート/ミュート解除されたとき |
| onwaiting | 再生が可能になるまでメディアの再生が一時停止されたとき |
| onwheel | ユーザがマウスホイールを回転させたとき |
Blazorでは、数多くのDOMイベントを扱うことができます。状況に応じて、使い分けてみてください。
この本では、Blazorの基本から高度なテクニックまで、実際のプロジェクトに役立つ知識を網羅しています。 初心者から経験者まで、Blazorを扱うすべての開発者にとっての必読書です。 この記事の執筆者も参考にした「Blazor入門」で、あなたのBlazorスキルを飛躍的に向上させませんか？
合わせて読みたい
SignalRのまとめ
Blazor ServerアプリケーションにおけるSignalRの基本と、切断および再接続のシナリオを解説します。接続オプションのカスタマイズ手順について詳しく説明しています。
更新日：2024/08/06
RenderFragmemtの使い方
Blazorでのページ作成時に共通レイアウトの再利用性を高めるため、RenderFragmentを利用する方法を紹介。RenderFragmentを使ったコンポーネントを作成し、その中でChildContentを通してページ固有の内容を指定。これにより、類似のレイアウトを持つページでもコードの重複を防ぎ効率的な実装が可能になる。
更新日：2023/07/09
