はじめに
JavaScriptを使うと、ユーザーが行う操作（クリック、キー入力、マウス移動など）に応じた挙動を実装できます。今回は、よく使われるユーザーアクションの種類と基本的なイベントの使い方について記載していきます。
アクション一覧
| ユーザー操作 | イベント名 |
| クリック | click |
| 入力 | input |
| ホバー | mouseover |
| キー入力 | keydown, keyup |
| ダブルクリック | dblclick |
| 右クリック | contextmenu |
クリックイベント
クリックイベントは、ユーザーがボタンやリンクをマウスやタップでクリックしたときに発生します。最もよく使われる基本的なイベントの1つです。
html
<button id="clickBtn">クリックしてください</button>
JavaScript
document.getElementById("clickBtn").addEventListener("click", () => {
alert("クリックされました");
});
フォーム入力（キーボード）
inputイベントは、ユーザーがテキストボックスなどのフォーム要素に入力した内容が変更されたときに発生します。リアルタイムで入力の変化を捉えるのに便利です。
html
<input type="text" id="textInput" placeholder="入力してください">
<p id="output"></p>
JavaScript
document.getElementById("textInput").addEventListener("input", (event) => {
document.getElementById("output").textContent = `現在の入力：${event.target.value}`;
});
マウスオーバー・マウスアウト
mouseover・mouseoutイベントは、マウスが特定の要素の上に乗ったとき／離れたときにそれぞれ発生します。ホバー効果やヒント表示などに活用されます。
html
<div id="hoverBox" style="width:200px; height:100px; background:#eee;">
ホバー
</div>
JavaScript
const box = document.getElementById("hoverBox");
box.addEventListener("mouseover", () => {
box.style.backgroundColor = "lightblue";
});
box.addEventListener("mouseout", () => {
box.style.backgroundColor = "#eee";
});
キー入力検知（keydown / keyup）
キーボードの入力は、keydown（キーが押された瞬間）とkeyup（キーを離した瞬間）のイベントで検知できます。
html
<input type="text" id="keyInput" placeholder="キーを押して">
JavaScript
document.getElementById("keyInput").addEventListener("keydown", (e) => {
console.log(`押されたキー: ${e.key}`);
});
ダブルクリックや右クリック
dblclickイベントは、同じ要素を短時間で2回クリック（ダブルクリック）したときに発生します。右クリックを検知したい場合はcontextmenuイベントを使います。
html
<div id="doubleClickBox" style="padding: 20px; border: 1px solid #ccc;">
ダブルクリックして
</div>
JavaScript
document.getElementById("doubleClickBox").addEventListener("dblclick", () => {
alert("ダブルクリックされました");
});
まとめ
JavaScriptでは、クリック・入力・キーボード操作・マウス操作など、さまざまなユーザーアクションに対応したイベントを使って、ページの動きや反応を柔軟に制御できます。今回紹介したイベントリスナーは、Web開発において非常によく使われる基本的なテクニックです。
実際にコードを書いて試してみることで、それぞれの動作や使いどころを感覚的に理解できるように頑張りましょう。
最後に
JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript
以上、ログになります。
これからも継続していきましょう！！
コメント