|
読み込み時に処理を行う |
||
|---|---|---|
|
<BODY onLoad="★"> |
ページ読み込み時 | |
        |
||
|
<BODY onUnload="★"> |
ページ切り替え時 | |
|
||
|
<IMG SRC="☆" onAbort="★"> |
画像読み込み中断時 | |
|
||
|
<IMG SRC="☆" onError="★"> |
画像読み込み失敗時 | |
|
||
|
☆ |
画像ファイル名(URL) | |
|
★ |
実行する命令(関数) | |
| 解説 | onLoadイベントはページの読み込みが完了したときに発生し、onUnloadは他のページ移動する時に発生します。 また、onAbortイベントは、画像の読み込みが中断されたときに発生し、onErrorイベントは画像ファイルが表示できない場合に発生します。 |
|
|
フォーカス移動時に処理を行う |
||
|---|---|---|
|
<☆ onFocus="★"> |
ファーカスが合った時 | |
|
||
|
<☆ onBlur="★"> |
フォーカスが離れた時 | |
|
||
|
☆ |
BODY, INPUT TYPE="button", INPUT TYPE="radio", TEXTAREA, SELECT etc.. | |
|
★ |
実行する命令(関数) | |
| 解説 | マウスカーソルや[Tab]キーによって、フォーカスが移動したときに発生するイベント。 onFocusイベントはフォーカスが合った時、onBlurイベントはファーカスが離れたときに発生します。 |
|
|
マウスクリック時に処理を行う |
||
|---|---|---|
|
<☆ onClick="★"> |
マウスクリック時 | |
|
||
|
<☆ onmousedown="★"> |
マウスダウン時 | |
|
||
|
<☆ onmouseup="★"> |
マウスアップ時 | |
|
||
|
☆ |
INPUT TYPE="button", INPUT TYPE="radio" TEXTAREA, SELECT etc.. | |
|
★ |
実行する命令(関数) | |
| 解説 | マウスボタンが押されたときに発生するイベントです。 onClickイベントはマウスをクリックしたときに発生し、onmousedownイベントはマウスのボタンが押されたときに発生し、onmouseupイベントはマウスのボタンが離されたときに発生します。 |
|
|
マウス通過時に処理を行う |
||
|---|---|---|
|
<☆ onmouseover="★"> |
マウスカーソル通過時 | |
|
||
|
<☆ onmouseout="★"> |
マウスカーソルが外れた時 | |
|
||
|
☆ |
A HREF="URL", INPUT, TEXTAREA, SELECT etc.. | |
|
★ |
実行する命令(関数) | |
| 解説 | マウスカーソルが通過したときに発生するイベントです。 onmouseoverイベントはオブジェクト上をマウスカーソルを通過したときに発生し、onmouseoutイベントはマウスカーソルがオブジェクトから外れたときに発生します。 |
|
|
フォーム送信時に処理を行う |
||
|---|---|---|
|
<FORM onSubmit="★"> |
フォーム送信時 | |
|
||
|
<FORM onReset="★"> |
フォームリセット時 | |
|
||
|
★ |
実行する命令(関数) | |
| 解説 | onSubmitイベントはsubmitボタンがクリックされたときに発生し、onResetイベントはresetボタンがクリックされたときに発生します。 | |
|
フォーム操作時に処理を行う |
||
|---|---|---|
|
<▲ onChange="★"> |
オブジェクト変更時 | |
|
||
|
<△ onSelect="★"> |
入力フィールド選択時 | |
|
||
|
▲ |
SELECT, TEXTAREA, INPUT TYPE="button", INPUT TYPE="text" etc.. | |
|
△ |
TEXTAREA, INPUT TYPE="text" | |
|
★ |
実行する命令(関数) | |
| 解説 | onChangeイベントはオブジェクト変更時に発生し、onSelectイベントは入力フィールド選択時に発生します。 | |
|
ドラッグアンドドロップ(D&D)の処理を行う |
||
|---|---|---|
|
window.ondragdrop=★ |
D&D時の処理を設定 | |
|
||
|
★ |
実行する命令(関数) | |
| 解説 | D&Dの処理を許可または不許可にします。関数から返される値が[true]なら可、[false]なら不可となります。通常デスクトップ上などにあるHTMLファイルやフォルダをブラウザ上にD&Dすると、そのHTMLページやフォルダ内のファイル一覧が表示されますが、不可に設定してあった場合、ファイルやフォルダは表示されません。 | |
|
ドキュメント上のイベントを処理する |
||
|---|---|---|
|
document.onclick=★ |
クリックイベントを取得 | |
|
||
|
document.ondblclick=★ |
ダブルクリックイベントを取得 | |
|
||
|
document.onkeydown=★ |
キーダウンイベントを取得 | |
|
||
|
document.onkeypress=★ |
キープレスイベントを取得 | |
|
||
|
document.onkeyup=★ |
キーアップイベントを取得 | |
|
||
|
document.onmousedown=★ |
マウスダウンイベントを取得 | |
|
||
|
document.onmouseup=★ |
マウスアップイベントを取得 | |
|
||
|
★ |
実行する命令(関数) | |
| 解説 | キーボードやマウスを操作したときのイベントを取得し、それぞれのイベントが起こったときに処理を渡す関数名を指定します。 | |
|
イベント情報を取得する |
||
|---|---|---|
|
event.target |
イベント発生元のオブジェクトを参照 | |
|
||
|
event.type |
イベントの種類を参照 | |
|
||
| 解説 | eventオブジェクトは、イベントの取得や発生したイベントの参照に使用します。 targetプロパティはイベント発生元となるオブジェクトを返し、typeプロパティは発生したイベントの種類を返します。 |
|
|
マウスドラッグの距離を計測する |
||
|---|---|---|
|
window.captureEvents(★) |
イベントを取得する | |
|
||
|
window.▲.handleEvent(★) |
イベントを他のオブジェクトに渡す | |
|
||
|
window.releaseEvents(★) |
イベントを開放する | |
|
||
|
window.document.routeEvent(★) |
イベントを元に戻す | |
|
||
|
★ |
対象イベント | |
|
▲ |
オブジェクト名 | |
| 解説 | ウィンドウ上で発生するイベントを処理するためのメソッド郡です。デフォルトでは検出しないイベントを検出するために使用します。 captureEventsメソッドは、引数に指定したイベントを取得します。 handleEventメソッドは、そのイベントを他のオブジェクトに渡します。 releaseEventsメソッドは、captureEventsで指定したイベントを開放します。 routeEventメソッドは、イベントを消去せずに初期の状態に戻します。 |
|
|
マウスの位置を調べる |
||
|---|---|---|
|
★.x |
マウスのX座標を参照 | |
|
||
|
★.y |
マウスのY座標を参照 | |
|
||
|
★.height |
マウスのY座標を参照 | |
|
||
|
★.width |
マウスのX座標を参照 | |
|
||
|
★.pageX |
マウスのページ上のX座標を参照 | |
|
||
|
★.pageY |
マウスのページ上のY座標を参照 | |
|
||
|
★.screenX |
マウスの画面上のX座標を参照 | |
|
||
|
★.screenY |
マウスの画面上のY座標を参照 | |
|
||
|
★ |
イベントオブジェクト | |
| 解説 | ページ上および画面上における、イベント発生時のマウスの位置を調べます。 heightプロパティとwidthプロパティは、onmousedownやonkeydownなどを使って取得のタイミングを設定する必要があります。 |
|