ホームページで言う”イベント”とは、キーボードのキーが押されたとか、マウスがクリックされたとか移動したとか、ページが表示されたとか等々、そういった事を言います。
イベントハンドラは、そのような事があったとき、特定のJAVAスクリプトなどを動作させたりする等の指定をするためのものです。
タグの属性として、タグの中に記述します。
例・・
<p onClick="・・JAVAスクリプトなど・・">ここをクリックすると・・</p>
<a href="http://park6.wakwak.com/~psychol/p1.html" onMouseOver="・・JAVAスクリプトなど・・">サイコロ Town!へ</a>
赤い字で書いてあるのがイベントハンドラです。
それぞれのタグに囲まれた内容をクリックしたり、そこにマウスカーソルが重なったりすると、指定したJAVAスクリプトなどが動作します。
上記の例ですと、<p></p>で囲まれた文字 (ここをクリックすると・・)が、ホームページ上に表示されます。そして、そのページを見ている人が、それをクリックすると、その<p>タグの onClick=""に書かれたJAVAスクリプトが動作します。
<a></a>では、ホームページ上に表示された(サイコロ Town!へ)と言う文字にマウスカーソルが重なると、 onMouseOver=""で指定されたJAVAスクリプトが動作します。
*イベントハンドラは、大文字で書いても小文字で書いてもOKです。ただし全角文字はダメ。
マウス関連のイベントハンドラ・・マウスイベント
| onClick |
クリックしたら・・
|
| onDblClick |
ダブルクリックしたら・・
|
| onMouseOver |
マウスカーソルが重なったら・・・ |
| onMouseOut |
重なったマウスカーソルが離れたら・・ |
| onMouseMove |
マウスカーソルが移動したら・・ |
| onMouseDown |
マウスボタンが押されたら・・ |
| onMouseUp |
押されているマウスボタンを離したら・・ |
マウスイベントのイベントハンドラは、body内に記述するほとんどのタグに有効です。
キーボード関連のイベントハンドラ・・キーイベント
| onKeyDown |
キーが押されたら・・ |
| onKeyUp |
押されたキーが離されたら・・ |
| onKeyPress |
キーが押され続けたら・・ |
このようなキーイベントは、フォーカスを受け取ることができるタグの場合に有効です。
(フォーカスを受け取らないタグは無効です。)
有効なタグの例・・
<body>、<input>、<textarea>、<select>、<a>
ページや画像の読み込み(Load)に関するイベントハンドラ
| onLoad |
<body>タグや<img>タグで使います。
そのページ(<body>で使った場合)、
または画像(<img>で使った場合)が読み込まれたら・・
つまり、表示されたとき |
| onUnload |
<body>タグで使います。
他のページに切り替わるとき・・ |
| onError |
<img>タグで使います。
その画像の読み込みに失敗したら・・ |
| onAbort |
<img>タグで使います。
その画像の読み込みが中断したら・・ |
フォーカス関連のイベントハンドラ
| onFocus |
フォーカスが当たったら・・ |
| onBlur |
フォーカスがはずれたら・・ |
*フォーカスを受け取る事ができるタグにのみ有効。
有効なタグの例・・
<body>、<input>、<textarea>、<select>、<a>
フォーム(<form>)のためのイベントハンドラ
| onSubmit |
<form>タグに使用。
submitボタンが押されたら・・ |
| onReset |
<form>タグに使用。
resetボタンが押されたら・・ |
テキスト入力エリアのためのイベントハンドラ
| onSelect |
<input type="text">、<input type="password">、<textarea>に使用
テキストが選択されたら・・ |
<select>タグのイベントハンドラ
| onChange |
<selecT>タグに使用
選択が変わったら・・ |
その他のイベントハンドラ
| onResize |
ウィンドウの大きさが変わったら・・ |