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でのマウスイベントの取扱いに挑戦してみてください。
コメント