JavaScript - マウスイベント
こんにちは、志を抱くプログラマーたち！今日は、JavaScriptのマウスイベントの興味深い世界に飛び込みます。あなたの近所の親切なコンピュータの先生として、この旅を案内するのがとても楽しみです。信じてください、このチュートリアルの終わりまでに、マウスイベントをプロのように扱えるようになるでしょう！
一般的なマウスイベント
コードに飛び込む前に、JavaScriptで最も一般的なマウスイベントを見てみましょう。これらは、コンピュータがマウスとのインタラクションを理解する異なる方法として考えられます：
| イベント | 説明 |
|---|---|
| click | マウスが要素をクリックするときに発生 |
| dblclick | マウスが要素をダブルクリックするときに発生 |
| mousedown | マウスのボタンが要素上で押下されたときに発生 |
| mouseup | マウスのボタンが要素の上で解放されたときに発生 |
| mousemove | マウスのポインタが要素の上で動いたときに発生 |
| wheel | マウスのホイールが要素の上で上 یا下に回転したときに発生 |
これらのイベントを実際の例でそれぞれ見てみましょう！
例：クリックイベント
まずは最も基本的で一般的に使用されるマウスイベント、クリックイベントから始めましょう。
<button id="myButton">クリックしてね！</button>
<script>
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('ボタンがクリックされました！');
});
</script>この例では、JavaScriptにボタンがクリックされたときに反応するように指示しています。クリックが検知されると、アラートが表示されます。
以下はそのステップバイステップの説明です：
-
document.getElementById('myButton')を使用してボタンを取得します。 -
addEventListenerを使用してボタンにイベントリスナーを追加します。 - 'click'イベントをリスンするように指示します。
- クリックが発生すると、指定した関数を実行してアラートを表示します。
試してみてください！まるで魔法のようですが、実際にはJavaScriptがその仕事をしているだけです。
例：ダブルクリックイベント
次に、ダブルクリックイベントで少し難易度を上げてみましょう。クリックの二倍楽しめます！
<p id="myParagraph">ダブルクリックして色を変えてね！</p>
<script>
let paragraph = document.getElementById('myParagraph');
paragraph.addEventListener('dblclick', function() {
this.style.color = getRandomColor();
});
function getRandomColor() {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>この楽しい小さな例では、パラグラフをダブルクリックすると、ランダムな色に変わります。まるでカメレオンのように、でももっとクールな理由であなたがコントロールしているんです！
getRandomColor関数は私たちの小さな色の魔法使いです。呼び出されるたびにランダムな色を生成します。今はその内部構造に太多いことを気にせず、ただランダムな色を返すことを知ってください。
例：マウスダウンとマウスアップイベント
次に、マウスダウンとマウスアップイベントを見てみましょう。これらはまるでマウスイベントの陰と陽です。
<div id="myBox" style="width: 100px; height: 100px; background-color: blue;"></div>
<script>
let box = document.getElementById('myBox');
box.addEventListener('mousedown', function() {
this.style.backgroundColor = 'red';
});
box.addEventListener('mouseup', function() {
this.style.backgroundColor = 'blue';
});
</script>この例では、ボックスがマウスのボタンが押されたときに赤色に変わり、ボタンが解放されたときに再び青色に戻ります。まるでストレス解消玩具のように、でもデジタルなのです！
例：マウスムーブイベント
マウスムーブイベントは、マウスが要素の上を動いたときにトリガーされます。まるで迷路の中でマウスを追跡しているかのようですが、もっとcheesyではありません。
<div id="mouseTracker" style="width: 300px; height: 200px; border: 1px solid black;">
<p>ここにマウスを動かしてね！</p>
<p id="coordinates"></p>
</div>
<script>
let tracker = document.getElementById('mouseTracker');
let coordDisplay = document.getElementById('coordinates');
tracker.addEventListener('mousemove', function(event) {
let x = event.clientX - tracker.offsetLeft;
let y = event.clientY - tracker.offsetTop;
coordDisplay.textContent = `X: ${x}, Y: ${y}`;
});
</script>この例では、小さなマウス追跡エリアを作成します。ボックス内でマウスを動かすと、座標が表示されます。まるで小さなマウス船の船長のように、ピクセルの海を航海しているかのようです！
例：ホイールイベント
最後に、ホイールイベントを見てみましょう。このイベントは、マウスホイールを使用したときにトリガーされます。
<div id="wheelDemo" style="width: 200px; height: 200px; background-color: yellow; overflow: auto;">
<p style="height: 1000px;">マウスホイールでスクロールしてね！</p>
</div>
<script>
let wheelArea = document.getElementById('wheelDemo');
wheelArea.addEventListener('wheel', function(event) {
event.preventDefault(); // デフォルトのスクロール動作を防止
this.scrollTop += event.deltaY;
if (this.scrollTop > 0) {
this.style.backgroundColor = `rgb(255, ${255 - this.scrollTop}, 0)`;
}
});
</script>この例では、ホイールをスクロールすると、背景色が黄から赤に変わります。まるで夕日のように、でもあなたがマウスホイールでコントロールしているんです！
event.deltaYは垂直スクロール量を返します。これを使用して、コンテンツをスクロールし、色を変更します。
そして、皆さん！私たちはJavaScriptのマウスイベントの土地を旅しました。練習は完璧を生む、 thereforeこれらのイベントを試してみることを恐れずに。あなたが知らない間に、ユーザーが「哇、どうやったんだ？」と言うようなインタラクティブなウェブ体験を作成するでしょう。
お楽しみください、そしてあなたのマウスは常に正確にクリックしますように！
Credits: Image by storyset