イベントハンドラの利用
マウスなどに応じてJavaScriptを実行するには、「どのタイミングでJavaScriptを実行するか？」を HTMLファイル内で指定しておく必要があります。このタイミングを指定するのがイベントハンドラです。ステップ02では、 イベントハンドラの指定方法について学習します。
2.1 イベントハンドラとは…？
HTMLファイル内に記述したJavaScriptを正しく動作させるには、JavaScriptを実行するタイミングを指定しておく必要があります。このタイミング指定にするのがイベントハンドラです。イベントハンドラには、「マウスでクリックした時」「マウスポインタを移動したとき」など、操作内容ごとに個別のイベントハンドラ名が決められています。そして、HTMLのタグ内に以下のような形式でイベントハンドラを記述することにより、JavaScriptを実行するタイミング、および実行するJavaScriptを指定します。
イベントハンドラ名＝“実行するJavaScript”
2.2 クリックでJavaScriptを実行 onClick
ホームページにある要素をクリックした際にJavaScriptを実行させるには、onClickイベントを利用します。たとえば、画像をクリックした場合、そのimgタグにonClickイベントを追加し、その値にJavaScriptを記述します。
上の例では、「onClick」の部分がイベントハンドラ名、「alert('ねこの写真です！')」の部分がJavaScriptとなります。なお、alert（）はメッセージウインドウを表示するJavaScript命令(メソッド)であり、メッセージとして表示する文字をカッコ内に「'」(シングルコーテーション)で挟んで記述します。
※下の画像をクリックしてみて下さい。（図2-1）
2.3 マウスの移動でJavaScriptを実行 onMouseOver、onMouseOut
要素の上にマウスポインタがきた際にJavaScriptを実行させるには、onMousOverイベントを利用します。以下の場合、マウスポインタを画像の上に移動させると、「ねこの写真です！」というメッセージウインドウが表示されます。
※実行ボタンをクリックして下さい
これとは逆に、要素の外へマウスポインタを移動した際にJavaScriptを実行させるには、onMouseOutイベントを使用します。
※実行ボタンをクリックして下さい
2.4 ページが表示された直後にJavaScriptを実行する onLoad
ページが表示された直後にJavaScriptを実行する場合は、onLoadイベントを使用します。onLoadイベントはbodyタグに記述するのが普通であり、この場合、特に操作を行わなくても自動的にJavaScriptが実行されます。たとえば、下の実行ボタンをクリックすると、新しいページが表示された直後に「ようこそみなさん」というメッセージウインドウが表示されます。
2.5 その他のイベントハンドラ
これらの他にも、JavaScriptを実行するタイミングに応じて以下のようなイベントハンドラが
用意されています。
・onAbort
Webブラウザの[停止]ボタンをクリックした場合などで、画像の読み込みが中断された場合に
JavaScriptを実行します。
・onBlur
その要素からフォーカスが離れた際にJavaScriptを実行します。
※フォーカスは、[Tab]キーやマウスのクリックで移動できます。
・onChange
フォームの内容を変更した際にJavaScriptを実行します。
・onError
ページや画像の読み込み時にエラーが発生した場合にJavaScriptを実行しますｌ。
・onFocus
その要素にフォーカスが移動した際にJavaScriptを実行します。
・onReset
フォームがリセットされた場合にJavaScriptを実行します。
・onSelect
テキストボックスやテキストエリア内をクリックし、フォームへの入力が可能になった際にJavaScriptを実行
します。
・onSubmit
フォームのsubmitボタンをクリックした際にJavaScriptを実行します。
・onUnload
別のページへ移動する際にJavaScriptを実行します。
演習
（１）以下のようなHTMLファイルを下にあるテキストボックスに作成し、画像をクリックすると、
メッセージウインドウが表示されることを確認してみましょう。
※この演習で使用する画像のURLは「images/risu.jpg」です。
（２）onClickイベントをonMouseOverイベントに変更し、メッセージウインドウが表示されるタイミングがどのように変化するかを確認してみましょう。
（３）onMouseOverイベントをonMouseOutイベントに変更し、メッセージウインドウが表示されるタイミングがどのように変化するかを確認してみましょう。
（４）ページが表示された直後にメッセージウインドウが表示されるようにイベントハンドラを書き換えてみましょう。
※ここに直接入力できます。↓↓（テキストボックス）
→STEP01へ
→STEP03へ