イベントハンドラ

イベントハンドラとは

マウスポインタが「上に乗った」、「クリックされた」というような出来事のことをイベントといい、そのイベントに応じて何かを実行させるプログラミングモデルのことをイベントドリブンといいます。イベントハンドラはイベントに対して実行される処理のことです。

マウスのイベント

click               マウスボタンがクリックされた

dbclick           マウスボタンがダブルクリックされた

mouseover    マウスポインタが要素に乗った

mouseout      マウスポインタが要素から外れた

mousedown   マウスボタンを押した

mouseup        マウスボタンを離した

mousemove   マウスポインタが移動した 

マウスのイベントハンドラの使用１

img要素でship画像を表示させておいて、その画像の上にマウスポインタが乗ると、ship_h画像に切り替わり、マウスポインタが画像から外れると、最初のship画像に戻るという処理を行います。

<img src="img/ship.png" alt="白い帆をたなびかせる帆船群" onMouseOver="this.src='img/ship_h.png'" onMouseOut="this.src='img/ship.png'">

this.srcのthisは、このimg要素を示しています。

ship.png

ship_h.png 

マウスのイベントハンドラの使用２

解り易いように表示する場所に番号をつけ、左を①、右上を②、右下を③としてimg要素で三枚の画像を表示します。③に表示されている画像の上でマウスをクリックすると、その画像が①に表示されます。②に表示されている画像の上でマウスをクリックすると、その画像が画像①に表示されます。

②、③に表示されている画像を①に表示させるために、①に最初に表示しているimg要素にnameプロパティで名前「mainImage」をつけています。②と③に表示しているimg要素ではその名前を指定することで①の場所に画像を表示しています。

①<img src="img/b01.png" alt="飛行機" name="mainImage">
②<img src="img/s01.png" alt="飛行機1" onClick="mainImage.src='img/b01.png'">
③<img src="img/s02.png" alt="飛行機2" onClick="mainImage.src='img/b02.png'">

最初の表示 

左の画像①：b01.png　右上の画像②：s01.png　右下の画像③：s02.png

右下の③に表示されている画像をクリックしたときの表示

左の画像①：b02.png　右上の画像②：s01.png　右下の画像③：s02.png