JavaScriptのonclick・ondblclick・onmousedown・onmouseupとは？マウス操作イベントをまとめて解説
onclick・ondblclick・onmousedown・onmouseup は、
マウス操作に応じて発生するイベントです。
ボタン・リンク・画像など、ページ上のほとんどの要素で利用できます。
onclickイベントとは？
onclick は、マウスがクリックされたときに発生するイベントです。
クリックのタイミングは onmouseup と同じです。
使用例：ボタンクリックで関数を実行
<input type=”button” value=”OK” onclick=”myFunc()”>
→ ボタンがクリックされたら myFunc() を実行します。
ondblclickイベントとは？
ondblclick は、マウスがダブルクリックされたときに発生するイベントです。
使用例：ダブルクリックで処理を実行
<input type=”button” value=”OK” ondblclick=”myFunc()”>
→ ダブルクリックされたときだけ処理を実行したい場合に便利です。
onmousedownイベントとは？
onmousedown は、マウスのボタンが押された瞬間に発生するイベントです。
使用例：リンク上でマウスが押されたらメッセージ表示
<a href=”javascript:void(0)” onmousedown=”alert(‘はずれ’)”>リンク</a>
→ クリックの「押した瞬間」に反応します。
onmouseupイベントとは？
onmouseup は、押されたマウスボタンが離されたときに発生するイベントです。
使用例：画像上でマウスボタンが離れたら処理を実行
document.myImg1.onmouseup = myFunc;
→ クリックの「離した瞬間」に反応します。
4つのマウスイベントの違い
| イベント | 発生タイミング |
|---|---|
| onmousedown | マウスボタンを押した瞬間 |
| onmouseup | 押したボタンを離した瞬間 |
| onclick | 押して離したとき（クリック完了） |
| ondblclick | 素早く2回クリックしたとき |
→ 目的に応じて使い分けることで、より細かい操作が可能になります。
まとめ
onclick：クリック時に発生ondblclick：ダブルクリック時に発生onmousedown：マウスボタンを押した瞬間に発生onmouseup：マウスボタンを離した瞬間に発生- ほぼすべての要素で利用でき、UI操作に必須のイベント
