DOMイベント
DOM（ドキュメントオブジェクトモデル）イベントは何かが発生した、または発生中であるという信号であり、ユーザーの操作またはブラウザによってトリガーされます。[1] JavaScript、JScript、VBScript、Javaなどのクライアント側スクリプト言語は、 HTML、XHTML、XUL、SVGドキュメントなどのDOMツリー内の要素ノードにさまざまなイベントハンドラまたはリスナーを登録できます。
DOM イベントの例:
- ユーザーがマウスをクリックすると
- ウェブページが読み込まれたとき
- 画像が読み込まれたとき
- マウスを要素の上に移動すると
- 入力フィールドが変更されたとき
- HTMLフォームが送信されると
- ユーザーがキーを押すと[2]
歴史的に、DOMと同様に、様々なウェブブラウザで使用されるイベントモデルには大きな違いがあり、互換性の問題を引き起こしていました。この問題に対処するため、イベントモデルはワールドワイドウェブコンソーシアム（W3C）によってDOMレベル2として標準化されました。
イベント
HTMLイベント
一般的なイベント
ほとんどの要素ノードによって生成できるイベントの膨大なコレクションがあります。
- マウスイベント。[3] [4]
- キーボードイベント。
- HTML フレーム/オブジェクト イベント。
- HTML フォーム イベント。
- ユーザー インターフェイス イベント。
- ミューテーション イベント (ドキュメントの構造の変更に関する通知)。
- 進捗イベント[5]（XMLHttpRequestおよびFile API [6]で使用される）。
上記のイベント分類は W3C の分類と完全に同じではないことに注意してください。
| カテゴリ | タイプ | 属性 | 説明 | 泡 | キャンセル可能 |
|---|---|---|---|---|---|
| ねずみ | クリック | クリック時 | ポインティングデバイスのボタンが要素上でクリックされたときに発生します。クリックとは、同じ画面位置でのマウスダウンとマウスアップを指します。これらのイベントの順序は以下のとおりです。
| はい | はい |
| ダブルクリック | オンダブルクリック | ポインティングデバイスのボタンが要素上でダブルクリックされたときに発生します | はい | はい | |
| マウスダウン | マウスダウン時 | ポインティングデバイスのボタンが要素上で押されたときに発生します | はい | はい | |
| マウスアップ | マウスアップ時 | ポインティングデバイスのボタンが要素上で放されたときに発生します | はい | はい | |
| マウスオーバー | マウスオーバー時 | ポインティングデバイスが要素上に移動されたときに発生します | はい | はい | |
| マウス移動[7] | マウス移動時 | ポインティングデバイスが要素上にあるときに移動されると発生します | はい | はい | |
| マウスアウト | マウスアウト時 | ポインティングデバイスが要素から離れたときに発火します | はい | はい | |
| ドラッグスタート | オンドラッグスタート | ドラッグが開始されたときに要素に対して発生します。 | はい | はい | |
| ドラッグ | オンドラグ | このイベントは、ドラッグ操作中にドラッグのソース、つまり dragstart が発行された要素で発行されます。 | はい | はい | |
| ドラゲンター | オンドラゲンター | ドラッグ中にマウスが要素上に最初に移動されたときに発生します。 | はい | はい | |
| ドラッグリーブ | オンドラグリーブ | このイベントは、ドラッグ中にマウスが要素を離れたときに発生します。 | はい | いいえ | |
| ドラッグオーバー | オンドラゴバー | このイベントは、ドラッグ中にマウスが要素上に移動されると発生します。 | はい | はい | |
| 落とす | オンドロップ | ドラッグ操作の終了時にドロップが発生した要素でドロップ イベントが発生します。 | はい | はい | |
| ドラジェンド | 引きずられる | ドラッグ操作が完了すると、成功したかどうかに関係なく、ドラッグのソースは dragend イベントを受け取ります。 | はい | いいえ | |
| キーボード | キーダウン | キーダウン時 | キーボードのキーが押されたときに、キーが押される前に発生します。 | はい | はい |
| キー押下 | キーを押すと | キーボードのキーが押されたとき、keydown の後に発生します。 | はい | はい | |
| キーアップ | オンキーアップ | キーボードのキーが放されたときに発火します | はい | はい | |
| HTMLフレーム/オブジェクト | 負荷 | アップロード | ユーザーエージェントがウィンドウ、フレーム、オブジェクト、画像など、ドキュメント内のすべてのコンテンツの読み込みを完了したときに発生します。 要素の場合、対象要素とそのすべてのコンテンツの読み込みが完了したときに実行されます。 | いいえ | いいえ |
| 荷降ろし | オンアンロード | ユーザーエージェントがウィンドウまたはフレームからすべてのコンテンツを削除したときに発生します 要素の場合、ターゲット要素またはそのコンテンツのいずれかが削除されたときに発火します。 | いいえ | いいえ | |
| アボート | 中止 | オブジェクト/画像が完全に読み込まれる前に読み込みが停止されたときに発生します | はい | いいえ | |
| エラー | エラー時 | オブジェクト/画像/フレームが正しく読み込まれない場合に発生します | はい | いいえ | |
| サイズ変更 | サイズ変更 | ドキュメントビューのサイズが変更されたときに発生します | はい | いいえ | |
| スクロール | スクロール | 要素またはドキュメントビューがスクロールされたときに発生します | いいえ、ただし、ドキュメント上のスクロールイベントはウィンドウにバブルする必要があります[8] | いいえ | |
| HTMLフォーム | 選択 | 選択時 | ユーザーがテキストフィールド（入力とテキストエリアを含む） でテキストを選択したときに発生します。 | はい | いいえ |
| 変化 | オンチェンジ | コントロールが入力フォーカスを失い、フォーカスを取得してからその値が変更された ときに発生します。 | はい | いいえ | |
| 提出する | 送信時 | フォームが送信されたときに発火します | はい | はい | |
| リセット | リセット時 | フォームがリセットされたときに発生します | はい | いいえ | |
| 集中 | フォーカス | ポインティングデバイスまたはタブナビゲーションによって要素がフォーカスを受け取ったときに発生します。 | いいえ | いいえ | |
| ぼかし | ぼやけている | ポインティングデバイスまたはタブナビゲーションによって要素がフォーカスを失ったときに発生します。 | いいえ | いいえ | |
| ユーザーインターフェース | フォーカスイン | （なし） | HTML のフォーカス イベントに似ていますが、フォーカス可能な任意の要素に適用できます。 | はい | いいえ |
| フォーカスアウト | （なし） | HTML のぼかしイベントに似ていますが、フォーカス可能な要素に適用できます。 | はい | いいえ | |
| DOMアクティブ化 | （なし） | XULコマンドイベントに似ています。マウスのクリックやキーの押下などにより要素がアクティブ化されたときに発生します。 | はい | はい | |
| 突然変異 | DOMサブツリーが変更されました | （なし） | サブツリーが変更されたときに発生します | はい | いいえ |
| DOMNode挿入 | （なし） | ノードが別のノードの子として追加されたときに発生します | はい | いいえ | |
| DOMNodeが削除されました | （なし） | DOMツリーからノードが削除されたときに発生します | はい | いいえ | |
| DOMNodeRemovedFromDocument | （なし） | ドキュメントからノードが削除されるときに発生します | いいえ | いいえ | |
| DOMNodeInsertedIntoDocument | （なし） | ノードがドキュメントに挿入されるときに発生します | いいえ | いいえ | |
| DOMAttr が変更されました | （なし） | 属性が変更されたときに発生します | はい | いいえ | |
| DOM文字データが変更されました | （なし） | 文字データが変更されたときに発生します | はい | いいえ | |
| 進捗 | ロードスタート | （なし） | 進歩が始まりました。 | いいえ | いいえ |
| 進捗 | （なし） | 進行中。loadstart がディスパッチされた後。 | いいえ | いいえ | |
| エラー | （なし） | 進行に失敗しました。最後の進行がディスパッチされた後、または進行がディスパッチされていない場合はロード開始がディスパッチされた後です。 | いいえ | いいえ | |
| アボート | （なし） | 進行は終了しました。最後の進行がディスパッチされた後、または進行がディスパッチされていない場合はロードスタートがディスパッチされた後です。 | いいえ | いいえ | |
| 負荷 | （なし） | 進行は成功しました。最後の進行がディスパッチされた後、または進行がディスパッチされていない場合はロードスタートがディスパッチされた後です。 | いいえ | いいえ | |
| ロードエンド | （なし） | 進行が停止しました。エラー、中止、またはロードのいずれかがディスパッチされた後です。 | いいえ | いいえ |
名前が「DOM」で始まるイベントは現在十分にサポートされておらず、この点とその他のパフォーマンス上の理由から、W3CのDOMレベル3では非推奨となっています。MozillaとOperaは、DOMAttrModified、DOMNodeInserted、DOMNodeRemoved、DOMCharacterDataModifiedをサポートしています。ChromeとSafariは、DOMAttrModifiedを除くこれらのイベントをサポートしています。
タッチイベント
AppleのiOSやGoogleのAndroidなどのタッチ対応デバイス上で動作するWebブラウザは、追加のイベントを生成します。[9] ：§5.3
| カテゴリ | タイプ | 属性 | 説明 | 泡 | キャンセル可能 |
|---|---|---|---|---|---|
| 触る | タッチスタート | 指をタッチ面/画面に置いたときに発火します。 | はい | はい | |
| タッチエンド | 指がタッチ面/画面から離れた時に発火します。 | はい | はい | ||
| タッチムーブ | 画面上にすでに置かれている指を画面上で移動したときに発動します。 | はい | はい | ||
| タッチエンター | タッチ ポイントが DOM 要素によって定義されたインタラクティブ領域に移動すると発生します。 | はい | はい | ||
| タッチリーブ | タッチ ポイントが DOM 要素によって定義されたインタラクティブ領域から移動したときに発生します。 | はい | はい | ||
| タッチキャンセル | ユーザーエージェントは、タッチポイントが実装固有の方法で中断された（例えば、UAウィンドウの境界外への移動など）ことを示すために、このイベント型をディスパッチする必要があります。また、ユーザーがタッチポイント（ポインタ（指やスタイラスなど）がインターフェースのターゲット面と交差する座標点）をタッチ面上にデバイスまたは実装が記憶するように設定されている数よりも多く配置した場合にも、このイベント型をディスパッチすることができます。この場合、タッチリスト内の最も古いタッチポイントオブジェクトを削除する必要があります。[9] : §5.9 | はい | いいえ |
W3Cの勧告案では、は位置、アクティブだった修飾キー、対象のDOM要素内の位置、前回の以降に変更された位置をTouchEvent返します。[9]TouchListTouchTouchListTouchTouchListTouchTouchEvent
Appleはこのワーキンググループに参加せず、推奨プロセスの終盤で特許を公開することでタッチイベント仕様のW3C推奨を遅らせた。 [10]
ポインタイベント
マウス、タッチパネル、ペンなど、様々な入力デバイスを備えたデバイス上のウェブブラウザは、統合入力イベントを生成する場合があります。ユーザーは、入力デバイスの種類、そのデバイス上のボタン、そしてスタイラスペンの場合はボタンがどの程度強く押されたかを確認できます。2013年10月現在、このイベントはInternet Explorer 10および11でのみサポートされています。[11]
| カテゴリ | タイプ | 属性 | 説明 | 泡 | キャンセル可能 |
|---|---|---|---|---|---|
| ポインター | ポインタダウン | オンポインタダウン | ポインティング デバイスのボタンがアクティブになったとき、または要素上で押されたときに発生します。 | はい | はい |
| ポインタアップ | オンポインタアップ | ポインティングデバイスのボタンが要素上で放されたときに発生します | はい | はい | |
| ポインタキャンセル | オンポインタキャンセル | たとえば、ポインターダウン イベントの後にデバイスがパン/ズームに使用されているため、ポインティング デバイスがイベントを生成し続ける可能性が低い場合に発生します。 | はい | はい | |
| ポインタ移動 | オンポインタ移動 | ポインティングデバイスが要素上にあるときに移動されると発生します | はい | はい | |
| ポインタオーバー | オンポインタオーバー | ポインティングデバイスが要素上に移動されたときに発生します | はい | はい | |
| ポインタアウト | オンポインタアウト | ポインティングデバイスが要素から離れたときに発生します。また、ポインティングデバイスがホバーせずにポインターを上に移動した後、または | はい | はい | |
| ポインター入力 | オンポインタエンター | ポインティング デバイスが要素上に移動されたとき、またはホバーをサポートしていないポインティング デバイスのボタンがその子孫要素のいずれかで押されたときに発生します。 | いいえ | はい | |
| ポインタリーブ | オンポインタリーブ | ポインティング デバイスが要素から離れたとき、またはホバーをサポートしていないポインティング デバイスのボタンがその子孫要素の上で放されたときに発生します。 | いいえ | はい | |
| gotpointercapture | ポインタキャプチャを忘れた | setPointerCapture メソッドによってポインタがキャプチャされたときに発生します。 | はい | いいえ | |
| 失われたポインタキャプチャ | ポインタキャプチャの紛失 | releasePointerCapture メソッドによってポインタが解放されたときに発生します。 | はい | いいえ |
インディーUIイベント
まだ実際には実装されていませんが、Indie UIワーキンググループは、Webアプリケーション開発者が、プラットフォーム固有の技術的なイベントを処理することなく、標準的なユーザーインタラクションイベントをサポートできるようにしたいと考えています。[12]
使いやすいインターフェースをスクリプトで記述するのは、特にユーザーインターフェースのデザインパターンがソフトウェアプラットフォーム、ハードウェア、ロケールによって異なること、そしてそれらのインタラクションが個人の好みに基づいてさらにカスタマイズできることを考えると、困難を極める可能性があります。ユーザーは自身のシステムにおけるインターフェースの動作に慣れており、好みのインターフェースはWebアプリケーション作成者の好みのインターフェースとはしばしば異なります。
たとえば、最後のアクションを元に戻すというユーザーの意図を傍受したい Web アプリケーションの作成者は、次のすべてのイベントを「リッスン」する必要があります。
- Windows および Linux では、Control+Z。
- Mac OS X では Command+Z。
- 一部のモバイル デバイスでのシェイク イベント。
前のアクションを「元に戻す」ための単一の正規化されたリクエストをリッスンする方が簡単です。
| カテゴリ | タイプ | 説明 | 泡 | キャンセル可能 |
|---|---|---|---|---|
| リクエスト | リクエスト解除 | ユーザーが前の操作を「元に戻す」ことを希望していることを示します。(UndoManager インターフェースによって置き換えられる場合があります。) | はい | はい |
| 再リクエスト | ユーザーが以前に「元に戻した」アクションを「やり直す」ことを希望していることを示します。(UndoManager インターフェースによって置き換えられる場合があります。) | はい | いいえ | |
| 拡張リクエスト | ユーザーが、折りたたまれたセクション (開示ウィジェットなど) または階層内のブランチ ノード (ツリー ビューなど) の情報を表示することを希望していることを示します。 | はい | はい | |
| 崩壊リクエスト | ユーザーが、展開されたセクション (開示ウィジェットなど) または階層内のブランチ ノード (ツリー ビューなど) 内の情報を非表示にしたり折りたたんだりすることを希望していることを示します。 | はい | はい | |
| リクエストを拒否する | ユーザーが現在のビューを「閉じる」ことを希望していることを示します (例: ダイアログをキャンセルする、ポップアップ メニューを閉じる)。 | はい | はい | |
| 削除リクエスト | ユーザーがマークされた要素または現在のビューに対して「削除」アクションを開始することを示します。 | はい | はい | |
| フォーカスリクエスト | 方向フォーカスリクエスト | ユーザーエージェントがウェブアプリケーションに「direction focus」リクエストを送信した際に開始されます。ウェブ制作者は、ブラウザ標準の focus イベントと blur イベントで十分な場合、 directionalfocusrequest イベントを使用または登録すべきではありません。これらのイベントを不必要に使用すると、パフォーマンスの低下やユーザーエクスペリエンスの低下につながる可能性があります。 | はい | はい |
| リニアフォーカスリクエスト | ユーザーエージェントがウェブアプリケーションに「リニアフォーカス」リクエストを送信した際に開始されます。ウェブ制作者は、ブラウザ標準の focus イベントと blur イベントで十分な場合、linearfocusrequest イベントを使用または登録すべきではありません。このイベントタイプは、データグリッドなどの特殊なコントロールタイプでのみ必要です。これらのコントロールタイプでは、論理的に次の要素がフォーカス可能でない場合や、リクエストされるまでDOM内に存在しない場合があります。これらのイベントを不必要に使用すると、パフォーマンスの低下やユーザーエクスペリエンスの低下につながる可能性があります。 | はい | はい | |
| パレットフォーカスリクエスト | ユーザーエージェントがウェブアプリケーションに「パレットフォーカス」リクエストを送信したときに開始されます。このイベントを受け取ったウェブアプリケーション開発者は、ウェブアプリケーションの最初のパレットにフォーカスを移動するか、利用可能なすべてのパレット間でフォーカスを切り替える必要があります。注: パレットは、非モーダルダイアログまたはインスペクタウィンドウと呼ばれることもあります。 | はい | はい | |
| ツールバーフォーカスリクエスト | ユーザーエージェントがウェブアプリケーションに「ツールバーフォーカス」リクエストを送信したときに開始されます。このイベントを受け取ったウェブアプリケーション作成者は、ウェブアプリケーションのメインツールバーにフォーカスを移動するか、利用可能なすべてのツールバー間でフォーカスを切り替える必要があります。 | はい | はい | |
| 操作リクエスト | 移動リクエスト | ユーザーエージェントがウェブアプリケーションにx/yの差分値を含む移動リクエストを送信した際に開始されます。これは、例えば、レイアウトキャンバス上のオブジェクトを新しい場所に移動する場合に使用されます。 | はい | はい |
| パンリクエスト | ユーザーエージェントがウェブアプリケーションにx/yの差分値を含むパンリクエストを送信した際に開始されます。これは、例えば地図やその他のカスタム画像ビューアをパンする際に中心点を変更する場合に使用されます。 | はい | はい | |
| 回転リクエスト | ユーザー エージェントが、原点の x/y 値と度単位の回転値を伴った回転要求を Web アプリケーションに送信すると開始されます。 | はい | はい | |
| ズームリクエスト | ユーザー エージェントが、原点の x/y 値とズーム スケール係数を伴ったズーム要求を Web アプリケーションに送信すると開始されます。 | はい | はい | |
| スクロールリクエスト | スクロールリクエスト | ユーザーエージェントがウェブアプリケーションにx/yデルタ値またはその他の定義済みscrollType値のいずれかを伴ったスクロールリクエストを送信した際に開始されます。作成者は、カスタムスクロールビューでのみこのイベントとuiactionを使用する必要があります。 | はい | はい |
| 値変更リクエスト | 値変更リクエスト | ユーザーエージェントがウェブアプリケーションに値変更リクエストを送信したときに開始されます。スライダーやカルーセルなどのカスタム範囲コントロールで使用されます。 | はい | はい |
Internet Explorer固有のイベント
Internet Explorerでは、共通（W3C）イベントに加えて、2つの主要なイベントタイプが追加されています。これらのイベントの一部は、他のブラウザで事実上の標準として実装されています。
| カテゴリ | タイプ | 属性 | 説明 | 泡 | キャンセル可能 |
|---|---|---|---|---|---|
| クリップボード | カット | オンカット | 選択範囲がクリップボードに切り取られた後に発生します。 | はい | はい |
| コピー | オンコピー | 選択範囲がクリップボードにコピーされた後に発生します。 | はい | はい | |
| ペースト | ペースト | 選択範囲がクリップボードから貼り付けられた後に発生します。 | はい | はい | |
| カット前 | カット前 | 選択範囲がクリップボードに切り取られる前に発生します。 | はい | はい | |
| コピー前 | オンビフォアコピー | 選択範囲がクリップボードにコピーされる前に発生します。 | はい | はい | |
| ペースト前 | ペースト前に | 選択範囲がクリップボードから貼り付けられる前に発生します。 | はい | はい | |
| データバインディング | 更新後 | 更新後 | データバインドされたオブジェクトが更新された直後に発生します。 | はい | いいえ |
| 更新前 | 更新前に | データ ソースが更新される前に発生します。 | はい | はい | |
| 細胞変化 | オンセルチェンジ | データ ソースが変更されたときに発生します。 | はい | いいえ | |
| 利用可能なデータ | 利用可能なデータ | データ ソースからの新しいデータが利用可能になったときに発生します。 | はい | いいえ | |
| データセットが変更されました | ondatasetchanged | データ ソースのコンテンツが変更されたときに発生します。 | はい | いいえ | |
| データセット完了 | ondatasetcomplete | データ ソースからのデータの転送が完了したときに発生します。 | はい | いいえ | |
| エラー更新 | onerrorupdate | データ フィールドの更新中にエラーが発生した場合に発生します。 | はい | いいえ | |
| ロウエンター | オンローエンター | データ ソースから新しいデータ行が利用可能になったときに発生します。 | はい | いいえ | |
| rowexit | オンロウエグジット | データ ソースからのデータ行が終了したときに発生します。 | いいえ | はい | |
| 行削除 | onrowsdelete | データ ソースからデータの行が削除されたときに発生します。 | はい | いいえ | |
| 行挿入 | onrow挿入 | データ ソースからのデータ行が挿入されたときに発生します。 | はい | いいえ | |
| ねずみ | コンテキストメニュー | コンテキストメニュー | コンテキスト メニューが表示されたときに発生します。 | はい | はい |
| ドラッグ | オンドラグ | マウスのドラッグ中（移動中の要素上）に発生します。 | はい | はい | |
| ドラッグスタート | オンドラッグスタート | マウスのドラッグが開始されると（移動中の要素上で）発生します。 | はい | はい | |
| ドラゲンター | オンドラゲンター | 何かが領域（ターゲット要素上）にドラッグされたときに発生します。 | はい | はい | |
| ドラッグオーバー | オンドラゴバー | 領域（ターゲット要素上）上でドラッグが保持されたときに発生します。 | はい | はい | |
| ドラッグリーブ | オンドラグリーブ | 何かが領域外（ターゲット要素上）にドラッグされたときに発生します。 | はい | はい | |
| ドラジェンド | 引きずられる | マウスのドラッグが終了したときに発生します (移動中の要素上)。 | はい | はい | |
| 落とす | オンドロップ | ドラッグ中に有効なターゲット上でマウス ボタンが放されたときに発生します (ターゲット要素上)。 | はい | はい | |
| 選択開始 | オンセレクトスタート | ユーザーがテキストの選択を開始すると発生します。 | はい | はい | |
| キーボード | ヘルプ | オンヘルプ | ユーザーがヘルプを開始したときに発生します。 | はい | はい |
| HTMLフレーム/オブジェクト | アンロード前 | アンロード前 | ドキュメントがアンロードされる前に発生します。 | いいえ | はい |
| 停止 | オンストップ | ユーザーがオブジェクトの読み込みを停止したときに発生します。(abort とは異なり、stop イベントはドキュメントに添付できます) | いいえ | いいえ | |
| HTMLフォーム | 編集フォーカス前 | 編集フォーカス前 | 要素が編集のためにフォーカスを取得する前に発生します。 | はい | はい |
| マーキー | 始める | 起動時 | マーキーが新しいループを開始するときに発生します。 | いいえ | いいえ |
| 仕上げる | 仕上げ | マーキー ループが完了したときに発生します。 | いいえ | はい | |
| バウンス | 跳ね返る | スクロールするマーキーが反対方向に跳ね返ったときに発生します。 | いいえ | はい | |
| その他 | 印刷前 | 印刷前に | 文書が印刷される前に起動します | いいえ | いいえ |
| アフタープリント | オンアフタープリント | ドキュメントが印刷された直後に発生します。 | いいえ | いいえ | |
| プロパティ変更 | プロパティ変更時 | オブジェクトのプロパティが変更されたときに発生します。 | いいえ | いいえ | |
| フィルター交換 | フィルター変更 | フィルターのプロパティが変更されたとき、または遷移が終了したときに発生します。 | いいえ | いいえ | |
| 準備状態の変更 | 準備完了状態の変更 | 要素の readyState プロパティが変更されたときに発生します。 | いいえ | いいえ | |
| キャプチャを失う | オンロスキャプチャ | releaseCapture メソッドが呼び出されたときに発生します。 | いいえ | いいえ |
Mozilla、Safari、Opera もXMLHttpRequestオブジェクトの readystatechange イベントをサポートしています。Mozilla は、従来のイベント登録方法 (DOM Level 0) を使用した beforeunload イベントもサポートしています。Mozilla と Safari はコンテキストメニューもサポートしていますが、Mac 版 Internet Explorer はサポートしていません。
Firefox 6 以降では beforeprint イベントと afterprint イベントがサポートされていることに注意してください。
XULイベント
一般的な (W3C) イベントに加えて、Mozilla はXUL要素でのみ機能する一連のイベントを定義しました。[引用が必要]
| カテゴリ | タイプ | 属性 | 説明 | 泡 | キャンセル可能 |
|---|---|---|---|---|---|
| ねずみ | DOMマウススクロール | DOMマウススクロール | マウス ホイールを動かしてコンテンツをスクロールすると発生します。 | はい | はい |
| ドラッグドロップ | ドラッグドロップ | ユーザーがマウス ボタンを放してドラッグ中のオブジェクトをドロップしたときに発生します。 | いいえ | いいえ | |
| ドラゲンター | オンドラゲンター | ドラッグ中にマウスポインタが要素上に最初に移動したときに発生します。mouseover イベントに似ていますが、ドラッグ中に発生します。 | いいえ | いいえ | |
| ドラゲジット | オンドラゲジット | ドラッグ中にマウスポインタが要素から離れたときに発生します。また、要素にドロップした後にも呼び出されます。これは mouseout イベントに似ていますが、ドラッグ中に発生します。 | いいえ | いいえ | |
| ドラッグジェスチャー | オンドラッグジェスチャー | 通常はマウス ボタンを押したままマウスを動かして、ユーザーが要素のドラッグを開始したときに発生します。 | いいえ | いいえ | |
| ドラッグオーバー | オンドラゴバー | mousemove イベントに関連して、このイベントは何か要素上にドラッグされているときに発生します。 | いいえ | いいえ | |
| 入力 | チェックボックスの状態変更 | ユーザーまたはスクリプトによってチェックボックスがオンまたはオフになったときに発生します。 | いいえ | いいえ | |
| ラジオ状態の変更 | ユーザーまたはスクリプトによってラジオ ボタンが選択されたときに発生します。 | いいえ | いいえ | ||
| 近い | 閉じる | ウィンドウを閉じる要求があったときに発生します。 | いいえ | はい | |
| 指示 | オンコマンド | W3C DOMActivate イベントに似ています。マウスのクリックやキーの押下などにより要素がアクティブ化されたときに発生します。 | いいえ | いいえ | |
| 入力 | 入力時 | ユーザーがテキストボックスにテキストを入力したときに発生します。 | はい | いいえ | |
| ユーザーインターフェース | DOMメニュー項目アクティブ | DOMメニュー項目アクティブ | メニューまたはメニュー項目がマウスオーバーされたとき、または強調表示されたときに発生します。 | はい | いいえ |
| DOMメニュー項目非アクティブ | DOMメニュー項目非アクティブ | メニューまたはメニュー項目がマウスオーバーされなくなったとき、または強調表示されなくなったときに発生します。 | はい | いいえ | |
| コンテキストメニュー | コンテキストメニュー | ユーザーが要素のコンテキストメニューを開くよう要求したときに発生します。これを行うためのアクションはプラットフォームによって異なりますが、通常は右クリックです。 | いいえ | はい | |
| オーバーフロー | オンオーバーフロー | フルサイズで表示するのに十分なスペースがない場合に、ボックスまたはその他のレイアウト要素を起動します。 | いいえ | いいえ | |
| オーバーフロー変更 | onoverflowが変更されました | オーバーフロー状態が変化したときに発生します。 | いいえ | いいえ | |
| アンダーフロー | アンダーフロー | 要素をフルサイズで表示するのに十分なスペースができたときに、その要素に対して実行されます。 | いいえ | いいえ | |
| ポップアップ非表示 | ポップアップ非表示 | ポップアップが非表示になった後にポップアップを起動します。 | いいえ | いいえ | |
| ポップフィディング | オンポップフィディング | ポップアップが非表示になる直前にポップアップを表示します。 | いいえ | いいえ | |
| ポップアップ表示 | ポップアップ表示 | ポップアップが開く直前に実行されます。 | いいえ | はい | |
| ポップアップ表示 | ポップアップ表示 | ウィンドウが開かれたときに onload イベントが送信されるのと同じように、ポップアップが開かれた後にポップアップに対してイベントが発生します。 | いいえ | いいえ | |
| 指示 | 放送 | 放送中 | オブザーバーに配置されます。リッスンしているブロードキャスターの属性が変更されると、ブロードキャストイベントが送信されます。 | いいえ | いいえ |
| コマンド更新 | oncommandupdate | コマンドの更新が発生したときに発生します。 | いいえ | いいえ |
その他のイベント
MozillaとOpera 9には、DOMコンテンツが読み込まれた際に発生する、DOMContentLoadedおよびDOMFrameContentLoadedという、ドキュメント化されていないイベントもあります。これらは「load」とは異なり、関連ファイル（画像など）の読み込み前に発生します。ただし、DOMContentLoadedはHTML 5仕様に追加されています。[13] DOMContentLoadedイベントは、Webkitレンダリングエンジンビルド500以降にも実装されています。[14] [15]これは、 Google ChromeとSafari 3.1以降のすべてのバージョンに該当します。DOMContentLoadedはInternet Explorer 9にも実装されています。[16]
Opera 9 は、Web Forms 2.0 イベントDOMControlValueChanged、invalid、forminput、formchangeもサポートしています。
イベントフロー
ツリーに2つのイベントターゲットが参加している状況を考えてみましょう。どちらのイベントターゲットにも、同じイベントタイプ（例えば「クリック」）のイベントリスナーが登録されています。ユーザーが内側の要素をクリックした場合、処理方法は2通り考えられます。
- 外側の要素から内側の要素へとトリガーする（イベントキャプチャ）。このモデルはNetscape Navigatorに実装されています。
- 要素を内側から外側へとトリガーする（イベントバブリング）。このモデルはInternet Explorerなどのブラウザに実装されている。[17]
W3Cはこの闘争において中立的な立場を取っている。[18] : §1.2
W3C によれば、イベント ターゲットがツリーに参加する場合、イベントは次の 3 つのフェーズを経ます。
- キャプチャフェーズ: イベントはルートイベントターゲットからイベントのターゲットまで移動します
- ターゲットフェーズ: イベントはイベントターゲットを通過する
- バブルフェーズ（オプション）：イベントは、イベントのターゲットからルートイベントターゲットまで遡って移動します。バブルフェーズは、バブルするイベント（ただし
event.bubbles == true）に対してのみ発生します。
このイベントフローの視覚化は https://domevents.dev でご覧いただけます。
イベントの停止
イベントがイベントリスナーを通過している間に、イベントはevent.stopPropagation()次のように停止することができます。event.stopImmediatePropagation()
event.stopPropagation(): 現在のイベントフェーズで現在のイベントターゲットにアタッチされているすべてのイベントリスナーが終了した後、イベントは停止されますevent.stopImmediatePropagation(): イベントは直ちに停止され、それ以上のイベントリスナーは実行されません
イベントが停止されると、イベントパスに沿って移動しなくなります。イベントを停止しても、イベントがキャンセルされるわけではありません。
イベントを阻止するための従来のメカニズム
- を（Internet Explorer）
event.cancelBubbleに設定しますtrue - プロパティ
event.returnValueをfalse
イベントのキャンセル
イベントcancelableは を呼び出すことでキャンセルできますevent.preventDefault()。イベントをキャンセルすると、そのイベントに対するブラウザのデフォルトの動作が無効になります。イベントがキャンセルされると、event.defaultPreventedプロパティは に設定されますtrue。イベントをキャンセルしても、イベントパスに沿ったイベントの移動は停止しません。
イベントオブジェクト
Eventオブジェクトは、対象要素、押されたキー、押されたマウスボタン、マウスの位置など、特定のイベントに関する多くの情報を提供します。残念ながら、この領域にはブラウザ間で深刻な非互換性があるため、この記事ではW3CのEventオブジェクトのみを取り上げます。
| 名前 | タイプ | 説明 |
|---|---|---|
| タイプ | DOM文字列 | イベントの名前（DOMレベル2では大文字と小文字は区別されませんが、DOMレベル3では大文字と小文字が区別されます[19]）。 |
| ターゲット | イベントターゲット | イベントが最初にディスパッチされた EventTarget を示すために使用されます。 |
| 現在のターゲット | イベントターゲット | 現在 EventListeners が処理されている EventTarget を示すために使用されます。 |
| イベントフェーズ | 符号なしショート | 現在評価されているイベント フローのフェーズを示すために使用されます。 |
| 泡 | ブール値 | イベントがバブリング イベントであるかどうかを示すために使用されます。 |
| キャンセル可能 | ブール値 | イベントのデフォルトのアクションを防止できるかどうかを示すために使用されます。 |
| タイムスタンプ | DOMタイムスタンプ | イベントが作成された時刻 (エポックを基準としたミリ秒単位) を指定するために使用されます。 |
| 名前 | 引数の型 | 引数名 | 説明 |
|---|---|---|---|
| 伝播を停止する | イベント フロー中にイベントがさらに伝播するのを防ぎます。 | ||
| デフォルトを防止 | キャンセル可能な場合はイベントをキャンセルします。つまり、イベントの結果として実装によって通常実行されるデフォルトのアクションは実行されません。 | ||
| 初期化イベント | DOM文字列 | イベントタイプ引数 | イベントの種類を指定します。 |
| ブール値 | canBubbleArg | イベントがバブルできるかどうかを指定します。 | |
| ブール値 | キャンセル可能な引数 | イベントのデフォルトのアクションを防止できるかどうかを指定します。 |
イベント処理モデル
DOMレベル0
このイベント処理モデルはNetscape Navigatorによって導入され、2005 年現在でも最もクロスブラウザなモデルとなっています[アップデート]。[引用が必要]モデルには、インライン モデルと従来のモデルの 2 種類があります。
インラインモデル
インラインモデルでは、[20]イベントハンドラが要素の属性として追加されます。以下の例では、ハイパーリンクをクリックすると、「Hey Joe」というメッセージを含むアラートダイアログボックスが表示されます。デフォルトのクリックアクションは、イベントハンドラでfalseを返すことでキャンセルされます。
<!doctype html> < html lang = "en" > < head > < meta charset = "utf-8" > < title >インラインイベント処理</ title > </ head > < body >< h1 >インラインイベント処理</ h1 >< p >やあ< a href = "http://www.example.com" onclick = "triggerAlert('Joe'); return false;" >ジョー</ a > ! </ p ><script> function triggerAlert ( name ) { window.alert ( " Hey " + name ) ; } </script> </body> </html> インラインモデルに関してよくある誤解の一つ[要出典]nameは、関数内などでカスタム引数を持つイベントハンドラーを登録できるというものですtriggerAlert。上記の例ではそのように見えるかもしれませんが、実際にはブラウザのJavaScriptエンジンが属性内のステートメントを含む匿名関数onclickを作成しています。onclick要素のハンドラーは、次の匿名関数にバインドされます。
関数（）{ triggerAlert （'Joe' ）; falseを返す; } JavaScript イベント モデルのこの制限は、通常、イベント ハンドラーの関数オブジェクトに属性を割り当てるか、クロージャを使用することによって克服されます。
伝統的なモデル
従来のモデル[21]では、イベントハンドラはスクリプトによって追加または削除できます。インラインモデルと同様に、各イベントには1つのイベントハンドラしか登録できません。イベントを追加するには、要素オブジェクトのイベントプロパティにハンドラ名を割り当てます。イベントハンドラを削除するには、プロパティをnullに設定します。
<!doctype html> < html lang = "en" > < head > < meta charset = "utf-8" > < title >従来のイベント処理</ title > </ head >< body > < h1 >従来のイベント処理</ h1 >< p >やあ、ジョー！</ p >< script > var triggerAlert = function () { window . alert ( "Hey Joe" ); }; // イベント ハンドラーを割り当てますdocument . onclick = triggerAlert ; // 別のイベント ハンドラーを割り当てますwindow . onload = triggerAlert ; // 割り当てたイベント ハンドラーを削除しますwindow . onload = null ; </ script > </ body > </ html > パラメータを追加するには:
var name = 'Joe' ; document.onclick = ( function ( name ) { return function ( ) { alert ( ' Hey ' + name + '!' ); }; }( name )); 内部関数はそのスコープを保持します。
DOMレベル2
W3CはDOMレベル2でより柔軟なイベント処理モデルを設計しました。[18]
| 名前 | 説明 | 引数の型 | 引数名 |
|---|---|---|---|
| イベントリスナーの追加 | イベント ターゲットにイベント リスナーを登録できるようにします。 | DOM文字列 | タイプ |
| イベントリスナー | リスナー | ||
| ブール値 | キャプチャを使用する | ||
| イベントリスナーの削除 | イベント ターゲットからイベント リスナーを削除できるようにします。 | DOM文字列 | タイプ |
| イベントリスナー | リスナー | ||
| ブール値 | キャプチャを使用する | ||
| ディスパッチイベント | サブスクライブされたイベント リスナーにイベントを送信できるようにします。 | イベント | evt |
知っておくと便利なこと:
- イベントがバブルするのを防ぐには、開発者は
stopPropagation()イベント オブジェクトのメソッドを呼び出す必要があります。 - イベントのデフォルトのアクションが呼び出されないようにするには、開発者は
preventDefault()イベント オブジェクトのメソッドを呼び出す必要があります。
従来のモデルとの主な違いは、同じイベントに対して複数のイベントハンドラを登録できることです。useCaptureまた、このオプションを使用して、ハンドラをバブリングフェーズではなくキャプチャフェーズで呼び出すように指定することもできます。このモデルは、 Mozilla、Opera、Safari、Chrome、Konquerorでサポートされています。
従来のモデルで使用された例を書き直す
<!doctype html> < html lang = "en" > < head > < meta charset = "utf-8" > < title > DOM レベル 2 </ title > </ head >< body > < h1 > DOM レベル 2 </ h1 > < p >やあ、ジョー！</ p > < script > var heyJoe = function () { window . alert ( "Hey Joe!" ); } // イベント ハンドラーを追加します。 document . addEventListener ( "click" , heyJoe , true ); // キャプチャ フェーズ// 別のイベント ハンドラーを追加します。 window . addEventListener ( "load" , heyJoe , false ); // バブリング フェーズ// 追加したイベント ハンドラーを削除します。window . removeEventListener ( "load" , heyJoe , false ); </ script > </本体> </ html >Internet Explorer固有のモデル
Microsoft Internet Explorerバージョン8より前のバージョンは、W3C標準の承認前に独自のモデルが作成されたため、W3Cモデルに準拠していません。Internet Explorer 9はDOMレベル3イベントに準拠しており、[22] Internet Explorer 11ではMicrosoft固有のモデルのサポートが削除されています。[23]
| 名前 | 説明 | 引数の型 | 引数名 |
|---|---|---|---|
| アタッチイベント | W3C の addEventListener メソッドに似ています。 | 弦 | sイベント |
| ポインター | fp通知 | ||
| デタッチイベント | W3C の removeEventListener メソッドに似ています。 | 弦 | sイベント |
| ポインター | fp通知 | ||
| 火災イベント | W3C の dispatchEvent メソッドに似ています。 | 弦 | sイベント |
| イベント | oイベントオブジェクト |
知っておくと便利なこと:
- イベントのバブルを防ぐには、開発者はイベントの
cancelBubbleプロパティを設定する必要があります。 - イベントのデフォルトのアクションが呼び出されないようにするには、開発者はイベントの
returnValueプロパティを設定する必要があります。 - キーワード
thisはグローバルwindowオブジェクトを参照します。
このモデルは、同じイベントに対して複数のイベントハンドラを登録できるという点で従来のモデルとは異なります。ただし、キャプチャフェーズでハンドラを呼び出すように指定するためのオプションは使用できません。このモデルは、Microsoft Internet ExplorerおよびTridentベースのブラウザ（Maxthon、Avant Browserなど）useCaptureでサポートされています。
以前のInternet Explorer固有のモデルで使用されていた例を書き直したもの
<!doctype html> < html lang = "en" > < head > < meta charset = "utf-8" > < title > Internet Explorer固有のモデル</ title > </ head > < body > < h1 > Internet Explorer固有のモデル</ h1 > < p >やあ、ジョー！</ p > < script > var heyJoe = function () { window . alert ( "Hey Joe!" ); } // イベント ハンドラーを追加します。 document . attachEvent ( "onclick" , heyJoe ); // 別のイベント ハンドラーを追加します。window . attachEvent ( "onload" , heyJoe ); // 追加したイベント ハンドラーを削除します。 window . detachEvent ( "onload" , heyJoe ); </ script > </本体> </ html >参考文献
- ^ “DOM標準”. dom.spec.whatwg.org . 2021年5月25日閲覧。
- ^ 「JavaScript DOMイベント」www.w3schools.com . 2019年8月3日閲覧。
- ^ 「7.8 ドラッグアンドドロップ — HTML5」。
- ^ 「HTMLドラッグアンドドロップAPI」。2024年3月28日。
- ^ 「進捗イベント」。
- ^ 「ファイル API」。
- ^ 「Element: Mousemove イベント - Web API | MDN」。2023年12月22日。
- ^ 「Document Object Model (DOM) Level 3 Events Specification (working draft)」. W3C . 2013年4月17日閲覧。
- ^ abc 「タッチイベント バージョン2 - W3Cエディターズドラフト」W3C、2011年11月14日。 2011年12月10日閲覧。
- ^ 「Apple、特許を利用して再びオープンスタンダードに打撃を与える」opera.com、2011年12月9日。 2011年12月9日閲覧。
- ^ 「ポインタイベント」。
- ^ 「IndieUI: イベント 1.0」。
- ^ 「HTML 標準」。
- ^ [1] 2010年6月11日アーカイブ、Wayback Machine
- ^ 「Which browsers support native DOMContentLoaded event? « Perfection Labs Development Tips」2011年6月29日。2011年6月29日時点のオリジナルよりアーカイブ。
{{cite web}}: CS1 maint: bot: 元のURLステータス不明（リンク） - ^ “Test Drive Redirect”. 2010年5月8日時点のオリジナルよりアーカイブ。2010年5月6日閲覧。
- ^ 「イベント紹介」. Quirksmode.org . 2012年9月15日閲覧。
- ^ ab 「Document Object Model (DOM) Level 2 Events Specification」. W3C . 2000年11月13日. 2012年9月15日閲覧。
- ^ 「Document Object Model (DOM) Level 3 Events Specification (working draft)」. W3C . 2013年4月17日閲覧。
- ^ 「早期イベントハンドラー」. Quirksmode.org . 2012年9月15日閲覧。
- ^ 「従来のイベント登録モデル」. Quirksmode.org . 2012年9月15日閲覧。
- ^ 「IE9でのDOM Level 3イベントのサポート」Microsoft 2010年3月26日 2010年3月28日閲覧。
- ^ 「IE11 Previewにおける互換性の変更点」Microsoft 2013年9月9日 2013年10月5日閲覧。
さらに読む
- デイテル、ハーヴェイ (2002).インターネットとワールドワイドウェブ：プログラミングの方法（第2版）. ISBN 0-13-030897-8
- Mozilla Organization. (2009). DOMイベントリファレンス. 2009年8月25日閲覧。
- Quirksmode (2008). イベント互換性表. 2008年11月27日閲覧。
- http://www.sitepen.com/blog/2008/07/10/iphone でタッチとジェスチャリング/
外部リンク
- ドキュメントオブジェクトモデル（DOM）レベル2イベント仕様
- ドキュメントオブジェクトモデル（DOM）レベル3イベントワーキングドラフト
- DOM4: イベント（編集者草稿）
- UI イベント ワーキングドラフト
- ポインタイベント W3C 候補勧告
- MSDN ポインタイベント
- domevents.dev - 探索を通じてDOMイベントについて学ぶためのビジュアライザー
- イベントバブリングとキャプチャのためのJSフィドル
