【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スキルを飛躍的に向上させませんか？
合わせて読みたい
URLパラメータを使い方
BlazorでURLからパラメータを受け取る方法を紹介。@pageディレクティブ内で｛｝で変数を宣言し、該当する変数を@code内で[Parameter]属性として宣言することで、URLから文字列としてパラメータを受け取ることが可能。数値を受け取りたい場合は、受け取った文字列を適切にキャストする必要がある。
更新日：2023/07/18
JavaScriptを呼び出し方
BlazorでWEB開発は主にHTML, CSS, C#を使用しますが、JavaScriptの利用も避けられない場面がある。JavaScriptをBlazor内で呼び出すためには、IJSRuntimeサービスを利用する。IJSRuntimeを用いることで、C#からJavaScriptの関数を非同期的に実行可能。例として、ボタンクリックでJavaScriptのアラートを表示する方法を説明。BlazorでのJavaScript使用は最小限に留めるべきだが、必要な場面での知識は重要。
更新日：2023/07/19
