..

JavaScriptの入門とサンプル集
JavaScript入門−基本編(イベントハンドラ)     ■戻る     ■次へ     ■Home

イベントハンドラ
 
 イベントとはPC上で「マウスをクリックした」、「ページが読み込まれた」など、何かが起きた時に発生するものです。JavaScriptではそのイベントに対して行う処理(イベントハンドラ)をタグの部分で指定します。

イベントの種類
onClick
マウスがクリックされた時
onDbclick
マウスがダブルクリックされた時
onKeydown
キーが押された時
onKeypress
キーがしばらく押された時
onKeyup
キーが離された時
onMousedown
マウスボタンが押された時
onMouseup
マウスボタンが離された時
onMouseover
マウスカーソルがオブジェクトに重なった時
onMouseout
マウスカーソルがオブジェクトから離れた時
onMousemove
マウスカーソルが移動した時
onLoad
ページが読み込まれた時
onUnload
他のページに移動する時
onFocus
選択された状態になった時
onBlur
フォーカスを失った時
onSubmit
フォームがサブミットされた時
onReset
フォームがリセットされた時
onChange
フォームの内容が変更された時
onResize
ウインドウがリサイズされた時
onMove
ウインドウが移動された時
onDragdrop
ファイルがウインドウにドラッグ&ドロップされた時
onAbort
イメージの読み込みが中断された時
onError
読み込みが失敗した時
onSelect
テキストが選択された時

イベント処理の流れ

   1.ページ上のオブジェクト(画像、文字等)をクリックした。(onClick)→イベント発生

   2.クリックしたことがオブジェクトに伝えられる。

   3.そのイベントに対しての処理が記述されていたら、その処理を実行する。

 例えば画像をクリックした時にアラート表示させるなら、

     <img src="picture.gif" onClick="alert('画像をクリックされました')">

リンクをクリックした時にアラート表示させるなら、

     <a href="#" onClick="alert('リンクがクリックされました')">
     (リンク先の"#"はダミーでこのページの一番上に飛ぶように指定しています)

      こんな方法もあります。
     <a href="JavaScript:alert('リンクがクリックされました')">

テキストにマウスを重ねた時にアラート表示させるなら、

     <div onMouseover="alert('文字とマウスカーソルが重なりました')">
      文字
     </div>


というよう記述します。

■補足 『<div>タグについて』

 <div>タグはそのもの自体は意味をもたず範囲を指定するのによく使われるタグです。

 (例)スタイルシートである範囲のマウスカーソルを「+」に変更する場合

     <div style="cursor:crosshair">
      この範囲ではマウスカーソル<br>
     が「+」の形になります。
     </div>


..


ブラウザのイベント

 今まで紹介したイベントは人が行う動作についてのものでしたが、ブラウザからもイベントは発生します。このイベントを上手く使うことでページを読み込ん だ時に実行する’しかけ’や、プログラムの初期設定に用いることができます。よく使われるイベントとしては、ページが読み込まれた時に発生する「onLoad」と他のページに移動する時に発生する「onUnload」などがあります。

 ページ読み込み時にアラート表示させるには、

     <body onLoad="alert('いらっしゃいませ!')">

他のページに移動する時にアラート表示させるには、

     <body onUnload="alert('さようなら・・・')">

イベントハンドラから関数を呼び出すこともできます。ページ読み込み時に関数を実行させるには、

     <body onLoad="funcInit()">

というように記述します。




 では、これらのイベントハンドラを使ったサンプルプログラムを見てみましょう。テキストや画像、ページをクリックしてみてください。

<html>
<head>
<title>イベント</title>
</head>

<body onLoad="alert('こんにちは!')" >

<div onClick="alert('文字がクリックされました')">
この文字をクリックしてみてください
</div>

<br>

<a href="#" onClick="alert('リンクがクリックされました')">
このリンクをクリックしてみてください
</a>

<br><br>

<img src="sample6.gif" onClick="alert('画像がクリックされました')">

</body>
</html>

〜sample6.html〜のリスト




ページが読み込まれたら「こんにちは」と表示

<div>タグで囲んだ範囲をクリックすると「文字がクリックされま
した」と表示




リンク部分をクリックすると「リンクがクリックされました」と表示





画像をクリックるすと「画像がクリックされました」と表示

ご自身のPCで入力される場合は以下の画像ファイルを右クリックでHTMLファイルと同一フォルダの中に保存してください

sample6.gif



   sample6.htmlを実行する


sample6.htmlの実行画面



 その他のイベントについてはリファレンスマニュアルを参照してください。

..

JavaScript入門−基本編(イベントハンドラ)     ■戻る     ■次へ     ■Home


..