JavaScript マウスイベントで処理を行うサンプル

nas2018/09/02

JavaScriptのマウスイベントで処理を行うサンプルです。

目次

サンプル mouseover(マウスオーバー)とmouseout(マウスアウト)
  画像を切り替えるサンプル
  mousemove(マウスムーブ)
  mousedown(マウスダウン)とmouseup(マウスアップ)

mouseover(マウスオーバー)とmouseout(マウスアウト)

mouseover(マウスオーバー)とmouseout(マウスアウト)で処理を行うサンプルです。
「テスト１」にカーソルを置くとmouseoverイベントが発生します。イベントを利用して背景色を表示します。
カーソルを外すとmouseoutイベントが発生します。イベントを利用して色を消します。

テスト１

 

上記サンプルのコードです。

<style>
#p1{border:1px solid black;width:300px;}
</style>

<p id="p1" onmouseover="mouseOver1()" onmouseout="mouseOut1()">テスト１</p>

<script>
function mouseOver1(){
	document.getElementById("p1").style.backgroundColor = "Aquamarine";
}
function mouseOut1(){
	document.getElementById("p1").style.backgroundColor = "transparent";
}
</script>

5行目のonmouseoverとonmouseoutはイベントハンドラです。イベントハンドラトはイベントを受けて処理に繋げます。
マウスが上にのるとonmouseoverの=の右にある関数(=8行目)が実行されます。
マウスが外れるとonmouseoutの=の右にある関数(=11行目)が実行されます。

 

画像を切り替えるサンプル

画像を切り替えるサンプルです。
画像にカーソルを置くとmouseover(マウスオーバー)イベントが発生し画像を切替えます。
カーソルを外すとmouseout(マウスアウト)イベントが発生し元の画像を表示します。

 

上記サンプルのコードです。

<img src="test/js-mouse-event1.png" 
onmouseover="this.src='test/js-mouse-event2.png'" 
onmouseout="this.src='test/js-mouse-event1.png'" />

imgタグの中にonmouseoverとonmouseoutを記述します。
画像ファイル名の前にthis.srcを追加し、画像ファイル名はシングルコーテーションで括ります。

 

mousemove(マウスムーブ)

mousemove(マウスムーブ)イベントで処理を行うサンプルです。
四角の場所でカーソルを動かすとmousemoveイベントが発生します。イベントを利用してカーソルの座標を更新します。
四角からカーソルが出るとイベントは発生しないので座標は更新されません。

 

上記サンプルのコードです。

<style>
#p2{border:1px solid black;width:200px;
height:100px;background-color:Linen;}
</style>

<p id="p2" onmousemove="mouseMove1(event)"><span id="span2"></span></p>

<script>
function mouseMove1(e){
	document.getElementById("span2").textContent 
		= e.clientX + ":" + e.clientY;
}
</script>

6行目のonmousemoveはイベントハンドラです。イベントハンドラトはイベントを受けて処理に繋げます。
マウスが移動するとonmousemoveの=の右にある関数(=9行目)が実行されます。
mouseMove1(event)のeventはeventオブジェクトです。引数に指定できます。

 

mousedown(マウスダウン)とmouseup(マウスアップ)

mousedown(マウスダウン)とmouseup(マウスアップ)で処理を行うサンプルです。
downという文字をクリックするとクリックのダウンの部分でmousedownイベントが発生します。イベントを利用してテスト３の箇所に背景色をつけます。
upという文字をクリックするとクリックのアップの部分でmouseupイベントが発生します。イベントを利用してテスト３の箇所の背景色を消します。

テスト３

down

up

 

上記サンプルのコードです。

<style>
#p3{border:1px solid black;width:300px;}
</style>

<p id="p3" >テスト３</p>
<p onmousedown="mouseDown()";>down</p>
<p onmouseup="mouseUP()">up</p>

<script>
function mouseDown(){
	document.getElementById("p3").style.backgroundColor = "Aquamarine";
}
function mouseUP(){
	document.getElementById("p3").style.backgroundColor = "transparent";
}
</script>

6,7行目のonmousedownとonmouseupはイベントハンドラです。イベントハンドラトはイベントを受けて処理に繋げます。
6行目の文字をクリックするとonmousedownの=の右にある関数(=10行目)が実行されます。マウスダウンなのでそのままでは色が残ります。
7行目の文字をクリックするとonmouseupの=の右にある関数(=13行目)が実行されます。

関連の記事

JavaScript イベントとイベントハンドラのサンプル

△上に戻る