..

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
 テキストが選択された時

◇イベント処理の流れ
　　　１．ページ上のオブジェクト（画像、文字等）をクリックした。(onClick)→イベント発生
↓
　　　２．クリックしたことがオブジェクトに伝えられる。
↓
　　　３．そのイベントに対しての処理が記述されていたら、その処理を実行する。

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

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




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





画像をクリックるすと「画像がクリックされました」と表示
ご自身のＰＣで入力される場合は以下の画像ファイルを右クリックでHTMLファイルと同一フォルダの中に保存してください

sample6.gif


　　　sample6.htmlを実行する

sample6.htmlの実行画面



　その他のイベントについてはリファレンスマニュアルを参照してください。
..
■JavaScript入門−基本編−イベントハンドラ　　　　　■戻る　　　　　■次へ　　　　　■Home

..