ホームページ作成支援
ジャバスクリプト辞典 超基本こ難しい基本その1こ難しい基本その2予約語変数演算子条件文1条件文2
関数関数と変数関数の戻り値いろいろな関数配列フォームとフレームクッキー
JavaScriptサンプル1JavaScriptサンプル2JavaScriptサンプル3
JavaScript見習所

小難しい基本その2

■イベントとイベントハンドラ
JavaScriptでは「マウスをクリックする」「キーボードで入力する」等のユーザーの動きをイベントといいます。そのイベントが発生したときに処理を実行するのがイベントハンドラになります。
<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>
画面が変わったら表示、という自動処理と違い、ユーザーが動作(イベント)を起こすことによって、プログラムが動くというタイプですね〜。ちなみに、これの実行例はこちら

ジャバスクリプト
超基本こ難しい基本その1こ難しい基本その2予約語変数演算子条件文1条件文2
関数関数と変数関数の戻り値いろいろな関数配列フォームとフレームクッキー
JavaScriptサンプル1JavaScriptサンプル2JavaScriptサンプル3
便利リンク
ネット便利帳ホームページ作成支援イラストラウンジおすすめスタイルシートメモみつけたきせき