マウスのイベントハンドラ
マウスのイベントハンドラについてご紹介しています。
clickイベント
clickイベントはマウスがクリックされたときに発生します。
以下のサンプルでは〔OK〕ボタンをクリックする際に警告メッセージが表示されます。
<form action="#">
<input type="button" value="OK" onclick="alert('clickイベント')">
</form>
dblclickイベント
dblclickイベントはマウスがダブルクリックされたときに発生します。
以下のサンプルでは〔OK〕ボタンをダブルクリックする際に警告メッセージが表示されます。
<form action="#">
<input type="button" value="OK" ondblclick="alert('dblclickイベント')">
</form>
mousedownイベント
mousedownイベントはマウスボタンを押下したときに発生します。
<form action="#">
<input type="button" value="OK" onmousedown="alert('mousedownイベント')">
</form>
mousemoveイベント
mousemoveイベントはマウスカーソルが動いたときに発生します。
以下のサンプルではマウスカーソルが〔OK〕ボタンの上をを通過する際に警告メッセージが表示されます。
<form action="#">
<input type="button" value="OK" onmousemove="alert('mousemoveイベント')">
</form>
mouseoutイベント
mouseoutイベントは対象からマウスカーソルが離れたときに発生します。
以下のサンプルではマウスカーソルが〔OK〕ボタンの上から離れた際に警告メッセージが表示されます。
<form action="#">
<input type="button" value="OK" onmouseout="alert('mouseoutイベント')">
</form>
mouseoverイベント
mouseoverイベントは対象にマウスカーソルが重なったときに発生します。
以下のサンプルではマウスカーソルが〔OK〕ボタンの上に重なった際に警告メッセージが表示されます。
<form action="#">
<input type="button" value="OK" onmouseover="alert('mouseoverイベント')">
</form>
mouseupイベント
mouseupイベントはマウスボタンを離したときに発生します。
以下のサンプルでは〔OK〕ボタンをクリックしてマウスボタンを離した際に警告メッセージが表示されます。
<form action="#">
<input type="button" value="OK" onmouseup="alert('mouseupイベント')">
</form>