 |
 |
JavaScript見習所
小難しい基本その2
■イベントとイベントハンドラ
ＪａｖａＳｃｒｉｐｔでは「マウスをクリックする」「キーボードで入力する」等のユーザーの動きをイベントといいます。そのイベントが発生したときに処理を実行するのがイベントハンドラになります。
| <htmlタグ イベントハンドラ="JavaScriptプログラム"> |
たとえば、以下のジャバスクリプトを見てください。
<html>
<head>
<title>イベントハンドラ</title>
</head>
<body>
<form>
<input type="button" value="押して〜" onClick="alert('サンキュ〜♪')">
</form>
</body>
</html> |
この場合、「イベント」はマウスでボタンを押すことであり、イベントハンドラは「onClick=""」の部分となります。ちなみに上のジャバスクリプトの実行例はこちらです。
■イベント（イベントハンドラ）の一例
|
イベント
|
発生
|
イベントハンドラ
|
| abort |
ユーザーがイメージの読み込みを中止した場合 |
onAbort |
| blur |
ブラウザ本体、ページ内のフレーム、フォームのボタンなどからユーザーのフォーカスが離れた場合 |
onBlur |
| click |
ユーザーがリンク上やフォーム要素上でクリックした場合 |
onClick |
| change |
ユーザーによって要素（フォームフィールド）の値が変更されたとき |
onChange |
| error |
ドキュメント、イメージの読み込みエラーが生じた場合 |
onError |
| focus |
ブラウザ本体、ページ内のフレーム、フォームのボタンなどにユーザーのフォーカスが与えられた場合 |
onFocus |
| load |
ページがブラウザにロードさせたとき |
onLoad |
| mouseout |
ユーザーが領域の外にカーソルを移動させたとき |
onMouseout |
| mouseover |
ユーザーが領域内にカーソルを移動させたとき |
onMouseover |
| reset |
ユーザーがresetボタンをクリックしたとき |
onReset |
| select |
ユーザーがフォーム要素のフィールドを選択したとき |
onSelect |
| submit |
ユーザーがsubmitボタンをクリックしたしたとき |
onSubmit |
| unload |
ユーザーがページを出たとき |
onUnload |
■イベントハンドラによるJavaScriptの例
<html>
<head>
<title>ボタンを押したら変更</title>
</head>
<body>
<form name="a">
<input type="text" value="にゃ〜にゃ〜♪" name="b"><br>
<input type="button" value="英語" onClick="document.a.b.value='cat'">
<input type="button" value="日本語" onClick="document.a.b.value='猫'">
</form>
<form name="c">
<input type="text" value="わんわん♪" name="d"><br>
</form>
</body>
</html> |
画面が変わったら表示、という自動処理と違い、ユーザーが動作（イベント）を起こすことによって、プログラムが動くというタイプですね〜。ちなみに、これの実行例はこちら。
|
|
|
 |
