イベントハンドラの種類
イベントハンドラ名には、
- onblur
- onclick
- onchange
- onfocus
- onload
- onmoveover
- onselect
- onsubmit
- onunload
の9種類があります。
イベント・ハンドラの種類
| イベントハンドラ名 | イベントの発生するタイミング | イベントが発生する部品 |
|---|---|---|
| onblur | フォーカスがはずれたとき | テキストフィールド |
| onclick | クリックされたとき | ボタン、ラジオボタン、チェックボックス、サブミットボタン、リンク、リセットボタン |
| onchange | フィールドの内容が変更されたとき | テキストフィールド |
| onfocus | フォーカスされたとき | テキストフィールド |
| onload | ロードされたとき | <BODY>タグ |
| onmoveover | マウスカーソルが上を通り過ぎたとき | リンク |
| onselect | INPUTフィールドをセレクトしたとき | テキストフィールド、テキストエリア |
| onsubmit | フォームをsubmitしたとき | サブミットボタン |
| onunload | 別のページに移動するとき | <BODY>タグ |
オブジェクトに起こるイベント
| イベント名 | オブジェクト名 | ||||
|---|---|---|---|---|---|
| Botton | CheckBox | Link | RadioBotton | Reset | |
| onclick | ○ | ○ | ○ | ○ | ○ |
| onmouseover | ○ | ||||
| onfocus | |||||
| onblur | |||||
| onchange | |||||
| onselect | |||||
| onload | |||||
| onunload | |||||
| onsubmit | |||||
オブジェクトに起こるイベント
| イベント名 | オブジェクト名 | ||||
|---|---|---|---|---|---|
| Submit | Select | Text | TextArea | Window | |
| onclick | ○ | ||||
| onmouseover | |||||
| onfocus | ○ | ○ | ○ | ||
| onblur | ○ | ○ | ○ | ||
| onchange | ○ | ○ | ○ | ||
| onselect | ○ | ○ | |||
| onload | ○ | ||||
| onunload | ○ | ||||
| onsubmit | |||||
onclickイベント
onclickイベントは、オブジェクトがマウスでクリックされたときに生じます。ボタンフィールドを例に取ると次のように記入します。
<input type="botton" onclick="関数名">
オブジェクトのイベント(onclick)が発生すると、そこで指定された動作が呼び出されます。
<input type="button" value="ボタン" onclick="alert( 'BUTTON was CLICKED.' )">
チェックボックス
<input type="checkbox" onclick="alert( 'CHECKBOX was CLICKED.' )">チェックボックス
<a href="Link to" onclick="alert( 'LINK was CLICKED and jump now.')">リンク</a>
ラジオボタン
<input type="radio" onclick="alert( 'RADIOBUTTON was CLICKED.' )">ラジオボタン
<input type="reset" value="リセット" onclick="alert( 'RESET was CLICKED.' )">
<input type="submit" value="送信" onclick="alert( 'SUBMIT was CLICKED.' )">
onmouseoverイベント
onmouseoverイベントは、ハイパーテキストリンクにだけ生じるイベントで、リンクの上にマウスが行ったときに起こります。次のようにリンクを記述することでこのイベントに対応した動作を実行できます。
Text
onfocusイベント
onfocusイベントは、そのオブジェクトがユーザの入力を受け付け可能（フォーカス）になったときに起こります。
フォーカスがどうとかいうのは、例えばtextareaにマウスカーソルを合わせてクリックするとカーソルが出現しますが、これがフォーカスされた状態です。マウスカーソルを他に移動してクリックすればカーソルは消えてしまいます。これがフォーカスを失った状態です。TABキーを押してもフォーカスは移動します。フレームの場合なら、フォーカスされたフレームが黒枠に囲まれます。
onfocusイベントがあるのは、ユーザの入力や選択領域のあるテキストフィールドとセレクトだけです。ボタンなどのオブジェクトでは、「マウスが押された」こと自体が入力であり、その後にそこへ何かを入力したり、選択してもonfocusイベントはありません。
onfocusは次のようにして使います。
onblurイベント
onblurイベントは、そのオブジェクトでのユーザの入力が終了したときに起こります。別のオブジェクトがマウスでクリックされたりして、入力対象だった(フォーカスのあった）オブジェクトから別のオブジェクトへフォーカスが移るときに生じるものです。
onfocusイベントがあるのは、ユーザの入力や選択領域のあるテキストフィールドとセレクトだけです。ボタンなどのオブジェクトでは、「マウスが押される」という瞬間的なイベントしかないため、onfocusと同様にonblurイベントはありません。
次のようにして使います。
onchangeイベント
onchangeイベントは、そのオブジェクトでのユーザが何かを入力／削除してから（フォーカスを外した）ときに起こります。
また、初期値を設定していないテキストフィールドに初めてフォーカスし、何もしないでフォーカスを外したときにもonchangeが生じます。
onchangeイベントがあるのは、ユーザの入力や選択領域のあるテキストフィールドとセレクトだけです。ボタンなどのオブジェクトでは、「マウスが押される」という瞬間的なイベントしかなく、そのこと自体が「状態を変化させた」ことであるため、onchangeイベントはありません。
onchangeイベントは次のようにして使います。
onselectイベント
onselectイベントは、そのテキストフィールドオブジェクトでユーザが文字列を選択したときに起こります。
onselectイベントは次のようにして使います。
<input type="text" name="Text" value="Select Me" size=10 onselect="alert( 'Selected.')">
<textarea rows=3 cols=10 onselect="alert( 'Selected.'
)">Select Me</textarea>
onloadイベント
onloadイベントはあるHTMLが表示されるときに生じます。
次のようにして使います。
<body onload="alert( 'Welcome!! This is the first event for you.' )">
onunloadイベント
onunloadイベントはあるHTMLの表示を終了して別のページへ移るときに生じます。
次のようにして使います。
<body onunload="alert( 'Good bye. Please come here again!!' )">
onsubmitイベント
onsubmitイベントはこれまでに紹介してきたイベントと異なり、独立した一つ一つのオブジェクトに対して生じるものではありません。onsubmitイベントは「サブミットボタンが押されて、あるフォーム全体がサブミットされるとき」に生じるものです。
フォームの内容を送信するという機能上、イベント（送信）が起きるまえにスクリプトが呼び出されます。つまり、onsubmitイベントは「送信してから＊＊＊をする」ではなく、「＊＊＊の条件を満たしてないので送信しない」とか、「＊＊＊の条件を満たしているから送信する」という条件判定に使用します。
Example:
<script language="JavaScript">
function CheckMailAddress(FORM) {
if ( FORM.address.value == "" ) {
alert( "メールアドレスを記入してね" );
return false;
}
else {
return true;
}
}
</script>
<form name="myForm" onsubmit="CheckMailAddress(this)">
<p>メールアドレス：<input type="text" size="25" name="address">
<input type="submit"> </p>
</form>
onsubmitに代入される値がTRUEのときはサブミットされ、FALSEのときはサブミットされません。この例ではメールアドレスを記入するテキストフィールドに文字列がない場合(value="")は関数 CheckMailAddressがFALSEを返すのでサブミットしません。テキストフィールドに何かしら記入があれば関数CheckMailAddressがTRUEを返すのでサブミットします。
テキストフィールドなどの内部の値を取り出す方法は・・・（また今度！）。