JavaScript マウスイベント

JavaScriptでは、マウス操作に関連するさまざまな動作を扱うことができます。これらはすべてマウスイベントと呼ばれ、JavaScriptを使って動的なウェブページを作成する際に非常に重要な役割を果たします。

マウスイベントとは
マウスイベントの種類
応用例

マウスイベントとは

マウスイベントは、マウス操作（クリック、マウスオーバー、マウスアウトなど）が行われたときに発生するイベントのことを指します。JavaScriptでは、これらのイベントを取得して任意の関数を実行することができます。

マウスイベントの種類

click：要素がクリックされたときに発生します。
dblclick：要素がダブルクリックされたときに発生します。
mousedown：マウスボタンが押されたときに発生します。
mouseup：マウスボタンが離されたときに発生します。
mouseover：マウスカーソルが要素の上に移動したときに発生します。
mouseout：マウスカーソルが要素の上から離れたときに発生します。
mousemove：マウスカーソルが要素上で動いたときに発生します。

応用例

click

これは最もよく使われているマウスイベントで、全ての要素に使えます。

<button id="myButton">クリックしてください</button>
<p id="message"></p>
<script>
let button = document.getElementById('myButton');
let message = document.getElementById('message');

button.addEventListener('click', function() {
  message.textContent = 'ボタンがクリックされました！';
});
</script>

このコードでは、ユーザーがボタンをクリックすると、その事実がページ上に表示されます。

HTMLの部分では、ユーザーがクリックできるボタンと、メッセージを表示するための<p>要素を作成しています。
JavaScriptの部分では、まずgetElementById関数を使用してボタンとメッセージ要素の参照を取得します。
次に、addEventListener関数を使用してボタンにclickイベントリスナーを追加します。このリスナーは、ユーザーがボタンをクリックすると呼び出されます。
ユーザーがボタンをクリックすると、イベントリスナーのコールバック関数が実行され、メッセージ要素のtextContentプロパティが更新されて”ボタンがクリックされました！”と表示されます。

onmouseoverとonmouseout

<div id="myDiv">マウスをここに移動してください</div>
<script>
let div = document.getElementById('myDiv');

div.onmouseover = function() {
  div.textContent = 'マウスがここに入りました！';
};

div.onmouseout = function() {
  div.textContent = 'マウスがここから出ました！';
};
</script>

マウスをここに移動してください

このコードでは、ユーザーがdiv要素の上にマウスを移動させると、その事実がページ上に表示されます。また、マウスがdiv要素から出ると、その事実も表示されます。

HTMLの部分では、マウスを移動できる<div>要素を作成しています。
JavaScriptの部分では、まずgetElementById関数を使用してdiv要素の参照を取得します。
次に、div要素のonmouseoverプロパティに関数を割り当てます。この関数は、ユーザーがマウスをdiv要素の上に移動すると呼び出されます。
同様に、div要素のonmouseoutプロパティにも関数を割り当てます。この関数は、ユーザーがマウスをdiv要素から出すと呼び出されます。
これらの関数は、それぞれのイベントが発生すると、div要素のtextContentプロパティを更新して、適切なメッセージが表示されます。

これを使って、画像にマウスを合わせると、別の画像に切り替わる機能は簡単に実現できます。

onmousedownとonmouseup

<button id="myButton">ボタンをクリックしてください</button>
<p id="message"></p>
<script>
let button = document.getElementById('myButton');
let message = document.getElementById('message');

button.onmousedown = function() {
  message.textContent = 'ボタンが押されました！';
};

button.onmouseup = function() {
  message.textContent = 'ボタンが放されました！';
};
</script>

このコードでは、ユーザーがボタンを押すときとボタンから手を放すときに、その事実がページ上に表示されます。

HTMLの部分では、ユーザーがクリックできるボタンと、メッセージを表示するための<p>要素を作成しています。
JavaScriptの部分では、まずgetElementById関数を使用してボタンとメッセージ要素の参照を取得します。
次に、ボタン要素のonmousedownプロパティに関数を割り当てます。この関数は、ユーザーがボタンを押すと呼び出されます。
同様に、ボタン要素のonmouseupプロパティにも関数を割り当てます。この関数は、ユーザーがボタンから手を放すと呼び出されます。
これらの関数は、それぞれのイベントが発生すると、メッセージ要素のtextContentプロパティを更新して、適切なメッセージが表示されます。

この記事を参考に、JavaScriptでのマウスイベントの取扱いに挑戦してみてください。