キーボードイベントとマウスイベント
クリック、キー入力、ポインターイベントを処理します。
「キーボードイベントとマウスイベント」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
入力イベントの種類
マウスイベントとキーボードイベントを使うと、豊かなインタラクションを構築できます。それぞれの種類には、専用のイベントタイプとプロパティがあります。
clickイベント
clickは、主ボタンを押して離したときに発生します。また、ボタンやリンクをキーボードで操作したときにも発生するため、アクセシビリティにも対応できます。
btn.addEventListener("click", () => {
console.log("activated");
});dblclickとcontextmenu
dblclickはダブルクリック時に発生し、contextmenuは右クリック時に発生します（カスタムメニューを表示するために、通常はキャンセルします）。
el.addEventListener("dblclick", () => console.log("double"));
el.addEventListener("contextmenu", (e) => e.preventDefault());mousedown、mouseup、mousemove
これらを使うと、押す、離す、移動するといった操作を細かく制御できます。ドラッグ操作の基礎となるイベントです。
box.addEventListener("mousedown", () => console.log("down"));
box.addEventListener("mouseup", () => console.log("up"));mouseenterとmouseoverの違い
mouseenterはバブリングせず、子要素との境界を無視します。一方、mouseoverはバブリングし、子孫要素へ移動したときにも発生します。ホバー処理には通常、mouseenterが適しています。
el.addEventListener("mouseenter", () => el.classList.add("hover"));
el.addEventListener("mouseleave", () => el.classList.remove("hover"));マウスボタンの種類
buttonプロパティは、どのボタンによってイベントが発生したかを示します。0は左、1は中央、2は右です。
el.addEventListener("mousedown", (e) => {
if (e.button === 2) console.log("right button");
});keydownとkeyup
keydownはキーを押し下げたときに発生し、押し続けている間は繰り返し発生します。keyupはキーを離したときに発生します。keypressは非推奨です。
input.addEventListener("keydown", (e) => {
console.log("down: " + e.key);
});event.key
e.keyはキーの論理的な値です。"a"のような文字や、"Enter"、"Escape"、"ArrowUp"のような名前になります。
input.addEventListener("keydown", (e) => {
if (e.key === "Escape") console.log("cancel");
});event.code
e.codeは、キーボードレイアウトに依存しない物理的なキーの位置です（"KeyA"や"Space"など）。ゲームの操作にはこれを使います。
window.addEventListener("keydown", (e) => {
if (e.code === "Space") console.log("jump");
});キーボードショートカット
修飾キーのフラグとkeyを組み合わせてショートカットを検出し、preventDefaultを呼び出してブラウザーのデフォルト動作を上書きします。
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.key === "s") {
e.preventDefault();
console.log("save");
}
});押し続けたキーのrepeat
e.repeatは、キーを押し続けているためにkeydownが発生しているときにtrueになります。これにより、自動リピートを無視できます。
window.addEventListener("keydown", (e) => {
if (e.repeat) return;
console.log("first press of " + e.key);
});クイックチェック
キーボードレイアウトに依存しないプロパティを選んでください。
まとめ
マウスイベントには、click、dblclick、mousedown/mouseup/mousemove、そしてホバーに適したmouseenter/mouseleaveがあります。buttonはどのボタンかを識別します。キーボードイベントではkeydown/keyupを使い、文字や名前にはe.key、物理的なキーにはe.code、押し続けているキーにはe.repeatを使います。
よくある質問
「キーボードイベントとマウスイベント」レッスンは無料ですか？
はい。「キーボードイベントとマウスイベント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「キーボードイベントとマウスイベント」で何を学びますか？
クリック、キー入力、ポインターイベントを処理します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「キーボードイベントとマウスイベント」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- addEventListener の基本
- イベントオブジェクト
- preventDefault と stopPropagation
- キーボードイベントとマウスイベント