HTML DOM イベント

HTML DOM イベント

HTML DOM イベントにより、Javascript は HTML ドキュメント要素に異なるイベントハンドラを登録できます。

イベントは通常関数と組み合わせて使用します。関数はイベントが発生する前に実行されることはありません！（例：ユーザーがボタンをクリックする）。

ヒント：W3C 2 級 DOM イベントでイベントモデルが規定されています。

HTML DOM イベント

DOM：使用する DOM 属性レベルを示します。

マウスイベント

プロパティ 説明 DOM
onclick ユーザーがオブジェクトをクリックしたときに呼び出されるイベントハンドラ。 2
oncontextmenu ユーザーがマウスの右ボタンをクリックしてコンテキストメニューを開いたときにトリガーされます。  
ondblclick ユーザーがオブジェクトをダブルクリックしたときに呼び出されるイベントハンドラ。 2
onmousedown マウスボタンが押されたときにトリガーされます。 2
onmouseenter マウスポインターが要素の上に移動したときにトリガーされます。 2
onmouseleave マウスポインターが要素から外れたときにトリガーされます。 2
onmousemove マウスが移動したときにトリガーされます。 2
onmouseover マウスが要素の上に移動しました。 2
onmouseout マウスが要素から離れました。 2
onmouseup マウスボタンが離されたときにトリガーされます。 2

キーボードイベント

プロパティ 説明 DOM
onkeydown キーボードのキーが押されたときにトリガーされます。 2
onkeypress キーボードのキーが押されて離されたときにトリガーされます。 2
onkeyup キーボードのキーが離されたときにトリガーされます。 2

フレーム/オブジェクト（Frame/Object）イベント

プロパティ 説明 DOM
onabort 画像の読み込みが中断されました。（ <object>） 2
onbeforeunload このイベントは、ページを離れる直前（再読み込みまたは閉じるとき）にトリガーされます。 2
onerror ドキュメントまたは画像の読み込み中にエラーが発生しました。（ <object>、 <body>および <frameset>）  
onhashchange このイベントは、現在の URL のアンカー部分が変更されたときにトリガーされます。  
onload ページまたは画像の読み込みが完了しました。 2
onpageshow このイベントは、ユーザーがページにアクセスしたときにトリガーされます。
onpagehide このイベントは、ユーザーが現在のページから別のページに移動したときにトリガーされます。
onresize ウィンドウまたはフレームのサイズが変更されます。 2
onscroll ドキュメントがスクロールされたときに発生するイベント。 2
onunload ユーザーがページを離れたときにトリガーされます。（ <body> および <frameset>） 2

フォームイベント

プロパティ 説明 DOM
onblur 要素がフォーカスを失ったときにトリガーされます。 2
onchange このイベントは、フォーム要素の内容が変更されたときにトリガーされます（ <input>、<keygen>、<select>、および <textarea>） 2
onfocus 要素がフォーカスを取得したときにトリガーされます。 2
onfocusin 要素がフォーカスを取得する直前にトリガーされます。 2
onfocusout 要素がフォーカスを失う直前にトリガーされます。 2
oninput 要素がユーザーの入力を受け取ったときにトリガーされます。 3
onreset フォームがリセットされたときにトリガーされます。 2
onsearch ユーザーが検索フィールドにテキストを入力したときにトリガーされます（ <input="search">）  
onselect ユーザーがテキストを選択したときにトリガーされます（ <input> および <textarea>） 2
onsubmit フォームが送信されたときにトリガーされます。 2

クリップボードイベント

プロパティ 説明 DOM
oncopy このイベントは、ユーザーが要素の内容をコピーしたときにトリガーされます。  
oncut このイベントは、ユーザーが要素の内容を切り取ったときにトリガーされます。  
onpaste このイベントは、ユーザーが要素の内容を貼り付けたときにトリガーされます。  

印刷イベント

プロパティ 説明 DOM
onafterprint このイベントは、ページの印刷が開始されたか、印刷ウィンドウが閉じられたときにトリガーされます。  
onbeforeprint このイベントは、ページが印刷を開始する直前にトリガーされます。  

ドラッグイベント

イベント 説明 DOM
ondrag このイベントは、要素がドラッグされているときにトリガーされます。  
ondragend このイベントは、ユーザーが要素のドラッグを完了したときにトリガーされます。  
ondragenter このイベントは、ドラッグ中の要素がドロップターゲットに入ったときにトリガーされます。  
ondragleave このイベントは、ドラッグ中の要素がドロップターゲットから離れたときにトリガーされます。  
ondragover このイベントは、ドラッグ中の要素がドロップターゲットの上にあるときにトリガーされます。  
ondragstart このイベントは、ユーザーが要素のドラッグを開始したときにトリガーされます。  
ondrop このイベントは、ドラッグ中の要素がターゲット領域にドロップされたときにトリガーされます。  

マルチメディア（Media）イベント

イベント 説明 DOM
onabort イベントは、ビデオ/オーディオ（audio/video）の読み込みが終了したときにトリガーされます。  
oncanplay イベントは、ユーザーがビデオ/オーディオ（audio/video）を再生できる状態になったときにトリガーされます。  
oncanplaythrough イベントは、ビデオ/オーディオ（audio/video）が停止やバッファリングなしで正常に再生できるときにトリガーされます。  
ondurationchange イベントは、ビデオ/オーディオ（audio/video）の再生時間が変更されたときにトリガーされます。  
onemptied 現在の再生リストが空のときにトリガーされます。  
onended イベントは、ビデオ/オーディオ（audio/video）の再生が終了したときにトリガーされます。  
onerror イベントは、ビデオ/オーディオ（audio/video）データの読み込み中にエラーが発生したときにトリガーされます。  
onloadeddata イベントは、ブラウザーがビデオ/オーディオ（audio/video）の現在のフレームを読み込むときにトリガーされます。  
onloadedmetadata イベントは、指定されたビデオ/オーディオ（audio/video）のメタデータが読み込まれた後にトリガーされます。  
onloadstart イベントは、ブラウザーが指定されたビデオ/オーディオ（audio/video）のシークを開始したときにトリガーされます。  
onpause イベントは、ビデオ/オーディオ（audio/video）が一時停止されたときにトリガーされます。  
onplay イベントは、ビデオ/オーディオ（audio/video）が再生を開始したときにトリガーされます。  
onplaying イベントは、ビデオ/オーディオ（audio/video）が一時停止したとき、またはバッファリング後に再生を再開する準備ができたときにトリガーされます。  
onprogress イベントは、ブラウザーが指定されたビデオ/オーディオ（audio/video）をダウンロードしているときにトリガーされます。  
onratechange イベントは、ビデオ/オーディオ（audio/video）の再生速度が変更されたときにトリガーされます。  
onseeked イベントは、ユーザーがビデオ/オーディオ（audio/video）の再生位置をシークした後にトリガーされます。  
onseeking イベントは、ユーザーがビデオ/オーディオ（audio/video）のシークを開始したときにトリガーされます。  
onstalled イベントは、ブラウザーがメディアデータを取得したが、メディアデータが利用できないときにトリガーされます。  
onsuspend イベントは、ブラウザーがメディアデータの読み取りを中断したときにトリガーされます。  
ontimeupdate イベントは、現在の再生位置が変更されたときにトリガーされます。  
onvolumechange イベントは、音量が変更されたときにトリガーされます。  
onwaiting イベントは、次のフレームを再生するためにビデオがバッファリングを必要とするときにトリガーされます。  

アニメーションイベント

イベント 説明 DOM
animationend このイベントは、CSS アニメーションの再生が終了したときにトリガーされます。  
animationiteration このイベントは、CSS アニメーションが繰り返し再生されたときにトリガーされます。  
animationstart このイベントは、CSS アニメーションの再生が開始されたときにトリガーされます。  

トランジションイベント

イベント 説明 DOM
transitionend このイベントは、CSS トランジションが完了した後にトリガーされます。  

その他のイベント

イベント 説明 DOM
onmessage このイベントは、オブジェクト（WebSocket、Web Worker、Event Source、または子フレームや親ウィンドウ）を通じて、またはそこからメッセージを受信したときにトリガーされます。  
onmousewheel 非推奨です。使用onwheelイベントによる代替  
ononline このイベントは、ブラウザーがオンライン動作を開始したときにトリガーされます。  
onoffline このイベントは、ブラウザーがオフライン動作を開始したときにトリガーされます。  
onpopstate このイベントは、ウィンドウの閲覧履歴（history オブジェクト）が変更されたときにトリガーされます。  
onshow このイベントは、<menu> 要素がコンテキストメニューに表示されたときにトリガーされます。  
onstorage このイベントは、Web Storage（HTML 5 Web ストレージ）が更新されたときにトリガーされます。  
ontoggle このイベントは、ユーザーが <details> 要素を開いたり閉じたりしたときにトリガーされます。  
onwheel このイベントは、マウスホイールが要素上で上下にスクロールされたときにトリガーされます。  
visibilitychange このイベントは、現在のページの可視性状態が変化したかどうかを検出するために使用されます。  

イベントオブジェクト

定数

静的変数 説明 DOM
CAPTURING-PHASE 現在のイベントフェーズはキャプチャフェーズです(1) 1
AT-TARGET 現在のイベントはターゲットフェーズで、ターゲットイベントを評価しています(1) 2
BUBBLING-PHASE 現在のイベントはバブリングフェーズです(3) 3

プロパティ

プロパティ 説明 DOM
bubbles イベントがバブリングイベントタイプであるかどうかを示すブール値を返します。 2
cancelable イベントがキャンセル可能なデフォルトアクションを持っているかどうかを示すブール値を返します。 2
currentTarget イベントリスナーがイベントをトリガーした要素を返します。 2
eventPhase イベント伝播の現在のフェーズを返します。 2
target このイベントをトリガーした要素（イベントのターゲットノード）を返します。 2
timeStamp イベントが生成された日付と時刻を返します。 2
type 現在の Event オブジェクトが表すイベントの名前を返します。 2

メソッド

メソッド 説明 DOM
initEvent() 新しく作成された Event オブジェクトのプロパティを初期化します。 2
preventDefault() イベントに関連付けられたデフォルトアクションを実行しないようにブラウザに通知します。 2
stopPropagation() イベントをこれ以上配信しません。 2

ターゲットイベントオブジェクト

メソッド

メソッド 説明 DOM
addEventListener() ターゲットイベントにイベントリスナーを登録できます（IE8 = attachEvent()） 2
dispatchEvent() リスナーにイベントを送信できます（IE8 = fireEvent()） 2
removeEventListener() イベントターゲットに登録されたリスナーイベントを1回実行します（IE8 = detachEvent()） 2

イベントリスナーオブジェクト

メソッド

メソッド 説明 DOM
handleEvent() 任意のオブジェクトをイベントハンドラーとして登録します。 2

ドキュメントイベントオブジェクト

メソッド

メソッド 説明 DOM
createEvent()   2

マウス/キーボードイベントオブジェクト

プロパティ

プロパティ 説明 DOM
altKey イベントがトリガーされたときに「ALT」が押されているかどうかを返します。 2
button イベントがトリガーされたときに、どのマウスボタンがクリックされたかを返します。 2
clientX イベントがトリガーされたときのマウスポインターの水平座標を返します。 2
clientY イベントがトリガーされたときのマウスポインターの垂直座標を返します。 2
ctrlKey イベントがトリガーされたときに「CTRL」キーが押されているかどうかを返します。 2
Location デバイス上のキーの位置を返します。 3
charCode onkeypress イベントでトリガーされたキー値の文字コードを返します。 2
key キーが押されたときにキーの識別子を返します。 3
keyCode onkeypress イベントでトリガーされたキーの値の文字コード、または onkeydown または onkeyup イベントのキーコードを返します。 2
which onkeypress イベントでトリガーされたキーの値の文字コード、または onkeydown または onkeyup イベントのキーコードを返します。 2
metaKey イベントがトリガーされたときに「meta」キーが押されているかどうかを返します。 2
relatedTarget イベントのターゲットノードに関連するノードを返します。 2
screenX 何らかのイベントがトリガーされたときのマウスポインターの水平座標を返します。 2
screenY 何らかのイベントがトリガーされたときのマウスポインターの垂直座標を返します。 2
shiftKey イベントがトリガーされたときに「SHIFT」キーが押されているかどうかを返します。 2

メソッド

メソッド 説明 W3C
initMouseEvent() マウスイベントオブジェクトの値を初期化します。 2
initKeyboardEvent() キーボードイベントオブジェクトの値を初期化します。 3
その他の拡張