Home > マウスのイベントハンドラ

マウスのイベントハンドラ

マウスのイベントハンドラについてご紹介しています。

clickイベント

clickイベントはマウスがクリックされたときに発生します。

以下のサンプルでは〔OK〕ボタンをクリックする際に警告メッセージが表示されます。


<form action="#">
<input type="button" value="OK" onclick="alert('clickイベント')">
</form>

dblclickイベントはマウスがダブルクリックされたときに発生します。

以下のサンプルでは〔OK〕ボタンをダブルクリックする際に警告メッセージが表示されます。


<form action="#">
<input type="button" value="OK" ondblclick="alert('dblclickイベント')">
</form>

mousedownイベントはマウスボタンを押下したときに発生します。


<form action="#">
<input type="button" value="OK" onmousedown="alert('mousedownイベント')">
</form>

mousemoveイベントはマウスカーソルが動いたときに発生します。

以下のサンプルではマウスカーソルが〔OK〕ボタンの上をを通過する際に警告メッセージが表示されます。


<form action="#">
<input type="button" value="OK" onmousemove="alert('mousemoveイベント')">
</form>

mouseoutイベントは対象からマウスカーソルが離れたときに発生します。

以下のサンプルではマウスカーソルが〔OK〕ボタンの上から離れた際に警告メッセージが表示されます。


<form action="#">
<input type="button" value="OK" onmouseout="alert('mouseoutイベント')">
</form>

mouseoverイベントは対象にマウスカーソルが重なったときに発生します。

以下のサンプルではマウスカーソルが〔OK〕ボタンの上に重なった際に警告メッセージが表示されます。


<form action="#">
<input type="button" value="OK" onmouseover="alert('mouseoverイベント')">
</form>

mouseupイベントはマウスボタンを離したときに発生します。

以下のサンプルでは〔OK〕ボタンをクリックしてマウスボタンを離した際に警告メッセージが表示されます。


<form action="#">
<input type="button" value="OK" onmouseup="alert('mouseupイベント')">
</form>