【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スキルを飛躍的に向上させませんか？
合わせて読みたい
@をエスケープする方法
Blazorにおいて、＠記号は予約文字として扱われるため、文字列として表示する際にはエスケープが必要です。＠をエスケープして表示するためには、＠を２回連続して書くことで実現できます。この技術は、一般的なケースではあまり使用されないかもしれませんが、知っておくと便利な場面もあるでしょう。
更新日：2023/07/20
コンポーネントについて
Blazorは.NET CoreベースのSPA作成フレームワークで、C#とHTMLを使用。この記事はBlazorとRazorコンポーネントの基本を紹介。Blazorアプリは[コンポーネント駆動]で、再利用可能な部品（.razor拡張子）から構成。コンポーネント名は大文字始まりが必要。また、HTMLとC#を組み合わせて、イベントハンドリングやデータバインディングが行える。
更新日：2023/09/06
