ProgrammingJavaScript講座第1章 JavaScript言語仕様
第1章 JavaScript言語仕様

インベントハンドラ2

イベントハンドラの種類

イベントハンドラ名には、

  • 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

Text

onfocusイベント

onfocusイベントは、そのオブジェクトがユーザの入力を受け付け可能（フォーカス）になったときに起こります。
フォーカスがどうとかいうのは、例えばtextareaにマウスカーソルを合わせてクリックするとカーソルが出現しますが、これがフォーカスされた状態です。マウスカーソルを他に移動してクリックすればカーソルは消えてしまいます。これがフォーカスを失った状態です。TABキーを押してもフォーカスは移動します。フレームの場合なら、フォーカスされたフレームが黒枠に囲まれます。

onfocusイベントがあるのは、ユーザの入力や選択領域のあるテキストフィールドとセレクトだけです。ボタンなどのオブジェクトでは、「マウスが押された」こと自体が入力であり、その後にそこへ何かを入力したり、選択してもonfocusイベントはありません。

onfocusは次のようにして使います。

上の３つのオブジェクトをフォーカスしたときのメッセージが左のテキストフィールドに表示されます。ちなみに、上の例ではdocument.Focus.FocusMsg.value=の下線部分が、左のテキストフィールドを指しています。

onblurイベント

onblurイベントは、そのオブジェクトでのユーザの入力が終了したときに起こります。別のオブジェクトがマウスでクリックされたりして、入力対象だった(フォーカスのあった）オブジェクトから別のオブジェクトへフォーカスが移るときに生じるものです。
onfocusイベントがあるのは、ユーザの入力や選択領域のあるテキストフィールドとセレクトだけです。ボタンなどのオブジェクトでは、「マウスが押される」という瞬間的なイベントしかないため、onfocusと同様にonblurイベントはありません。
次のようにして使います。

<select onblur="document.Blur.BlurMsg.value='Select was Blur.'">
<option>セレクション-1
<option>セレクション-2
<option>セレクション-3
</select>

<input type="text" name="Text"
size=10 onblur="document.Blur.BlurMsg.value='TEXT was Blur.'">

<textarea rows=3 cols=10 onblur="document.Blur.BlurMsg.value='TEXTAREA was Blur.'"></textarea>

上の３つのオブジェクトをフォーカスしたときのメッセージが左のテキストフィールドに表示されます。onfocusとの違いがわかります？

onchangeイベント

onchangeイベントは、そのオブジェクトでのユーザが何かを入力／削除してから（フォーカスを外した）ときに起こります。
また、初期値を設定していないテキストフィールドに初めてフォーカスし、何もしないでフォーカスを外したときにもonchangeが生じます。
onchangeイベントがあるのは、ユーザの入力や選択領域のあるテキストフィールドとセレクトだけです。ボタンなどのオブジェクトでは、「マウスが押される」という瞬間的なイベントしかなく、そのこと自体が「状態を変化させた」ことであるため、onchangeイベントはありません。
onchangeイベントは次のようにして使います。

<select onchange=
     "document.Change.ChangeMsg.value=
     'Select was Changed.'">
<option>セレクション-1
<option>セレクション-2
<option>セレクション-3
</select>

<input type="text" name="Text"
size=10
     onchange="document.Change.ChangeMsg.value=
     'Text was Changed.'">

<textarea rows=3 cols=10
     onchange="document.Change.ChangeMsg.value= 'Textarea was Changed.'">
</textarea>

アンサー

上の３つのオブジェクトをチェンジすると、メッセージが「アンサー」とあるテキストフィールドに表示されます。

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を返すのでサブミットします。
テキストフィールドなどの内部の値を取り出す方法は・・・（また今度！）。

関連記事