こんにちは！JavaScriptで「ボタンを押したらポップアップを出したい」「スクロールに合わせてアニメーションさせたい」と思ったことはありませんか？
これらWebサイトの「動き」を実現しているのが、今回解説する 「イベント」 の仕組みです！
ユーザーの操作に反応してページが動くようになると、Web開発が一気に面白くなります✨
この記事では、JavaScriptのイベント処理の基本概念から、よく使う主要イベント一覧、実践的なリスナの登録・削除方法まで、初心者の方にも分かりやすく徹底解説していきます！
「イベントの扱い方をマスターして、もっと自由にWebサイトを動かせるようになりたい！」という方は、ぜひ一緒に学んでいきましょう！🚀
1. イベントハンドラ / イベントリスナとは？
JavaScriptにおける 「イベント」 とは、ユーザーの操作（クリック、キー入力、スクロールなど）やブラウザの状態変化（ページの読み込み完了など）の瞬間を指します！
このイベントを検知して特定の処理を実行させる仕組みがイベントハンドラおよびイベントリスナです。
-
イベントハンドラ（Event Handler）
HTML属性やJavaScriptプロパティ（例:onclick）を用いて、イベントに直接関数を紐付ける方法。1つのイベントに対して1つの処理しか登録できません（上書きされます） -
イベントリスナ（Event Listener）
addEventListenerメソッドを用いてイベントを監視する方法。1つのイベントに対して複数の処理を安全に登録できます。現在のWeb開発ではイベントリスナの使用が推奨されています
2. 主要なイベントの種類
代表的なイベントをカテゴリ別に整理しました。
① ウィンドウイベント (Window Events)
ブラウザ画面全体やドキュメントの状態変化に関するイベントです。
| イベント名 | 発火するタイミング |
|---|---|
DOMContentLoaded |
HTMLの解析が完了し、DOMツリーが構築された時 |
load |
HTMLに加え、画像やCSSなどの外部リソースも完全に読み込まれた時 |
resize |
ウィンドウサイズが変更された時 |
scroll |
ドキュメントや要素がスクロールされた時 |
＜例＞
// DOMの準備が整ったら初期化処理を実行
document.addEventListener('DOMContentLoaded', () => {
console.log('DOMツリーの読み込みが完了しました');
});
// 画面のスクロール量を監視
window.addEventListener('scroll', () => {
console.log(`現在のスクロール位置: ${window.scrollY}px`);
});
② フォームイベント (Form Events)
フォーム要素（<input>、<select>、<form>など）の操作に関するイベントです。
| イベント名 | 発火するタイミング |
|---|---|
submit |
フォームが送信された時 |
change |
要素の値が変更され、フォーカスが外れた時（<select>は選択時） |
input |
テキスト入力などで要素の値が変化した「瞬間」（リアルタイム） |
focus |
要素にフォーカスが当たった時 |
blur |
要素からフォーカスが外れた時 |
＜例＞
const input = document.getElementById('username');
const form = document.getElementById('loginForm');
// リアルタイムに入力値をチェック
input.addEventListener('input', (event) => {
console.log('現在の入力値:', event.target.value);
});
// フォーム送信時にページリロードを防止して処理を実行
form.addEventListener('submit', (event) => {
event.preventDefault(); // ページのリロード（既定の動作）をキャンセル
console.log('送信処理を実行しました');
});
③ キーボードイベント (Keyboard Events)
キーボードの操作に関するイベントです。
| イベント名 | 発火するタイミング |
|---|---|
keydown |
キーが押し込まれた時 |
keyup |
キーが離された時 |
※押されたキーの情報（e.key や e.code）は、イベントオブジェクトを介して取得します。
＜例＞
// Enterキーが押されたか判定
document.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
console.log('Enterキーが押されました');
}
// event.code を使えば「物理的なキー位置（KeyAなど）」を特定することも可能
});
④ マウスイベント (Mouse Events)
マウスやトラックパッドの操作に関するイベントです。
| イベント名 | 発火するタイミング |
|---|---|
click |
要素がクリックされた時 |
dblclick |
ダブルクリックされた時 |
mousedown |
マウスボタンが押し込まれた時 |
mouseup |
マウスボタンが離された時 |
mousemove |
マウスカーソルが移動している時 |
mouseenter |
カーソルが要素の上に乗った時（バブリングしない） |
mouseleave |
カーソルが要素から外れた時（バブリングしない） |
＜例＞
const box = document.getElementById('box');
// 要素のクリック検知
box.addEventListener('click', (event) => {
console.log('要素がクリックされました', event.target);
});
// カーソルが要素に乗った時・外れた時
box.addEventListener('mouseenter', () => {
box.style.backgroundColor = 'lightblue';
});
box.addEventListener('mouseleave', () => {
box.style.backgroundColor = 'white';
});
⑤ タッチイベント (Touch Events)
スマートフォンやタブレットなどのタッチデバイス特有のイベントです。
| イベント名 | 発火するタイミング |
|---|---|
touchstart |
画面に指が触れた時 |
touchend |
画面から指が離れた時 |
touchmove |
画面上で指をスライドさせている時 |
touchcancel |
タッチが中断された時（システム割り込みなど） |
＜例＞
const touchArea = document.getElementById('touchArea');
// タッチ開始時の指の座標を取得
touchArea.addEventListener('touchstart', (event) => {
const touch = event.touches[0];
console.log(`タッチ開始座標: X=${touch.clientX}, Y=${touch.clientY}`);
});
// 指を動かしている最中の処理
touchArea.addEventListener('touchmove', (event) => {
console.log('画面上をなぞっています');
});
3. イベントリスナの登録・削除
モダン開発における標準的なイベント制御手順です。
リスナの登録 (addEventListener)
ターゲットとなるDOM要素に対して、監視したい「イベント名」と「実行する関数（コールバック関数）」を指定します。
const button = document.getElementById('myButton');
// 関数を直接指定して登録
button.addEventListener('click', (event) => {
console.log('ボタンがクリックされました！', event);
});```markdown
### リスナの削除 (`removeEventListener`)
不要になったイベントリスナは、メモリの無駄遣い（メモリリーク）や意図しない重複実行を防ぐために削除（解除）します。
#### 基本的な書き方
`removeEventListener` を使う場合、登録時（`addEventListener`）と**全く同じイベント名・関数参照**を指定する必要があります。
```javascript
const button = document.getElementById('myButton');
// コールバック関数を変数（名前付き関数）として定義しておく
function handleClick(event) {
console.log('ボタンがクリックされました');
}
// イベントリスナの登録
button.addEventListener('click', handleClick);
// イベントリスナの削除
button.removeEventListener('click', handleClick);
⚠️ 削除できないケース（注意点）
アロー関数や無名関数を直接渡して登録した場合、削除することはできません。
関数が同じコード内容であっても、記述するたびに「別の関数オブジェクト（別の参照）」として扱われるためです。
// ❌ 削除できない例（参照が異なるため）
button.addEventListener('click', () => {
console.log('クリック');
});
// これは解除されない！
button.removeEventListener('click', () => {
console.log('クリック');
});
削除を行う予定がある場合は、必ず名前付き関数として定義してから登録してください。
実践パターン：1回だけ実行して自動的に削除する
1. 手動で削除する場合
関数の中から自らを removeEventListener で削除します。
const button = document.getElementById('myButton');
function handleOnce() {
console.log('最初の1回だけ実行されます');
// 処理が終わったら自分自身を解除
button.removeEventListener('click', handleOnce);
}
button.addEventListener('click', handleOnce);
2. { once: true } オプションを使う場合（モダンな書き方）
第3引数に { once: true } を渡すと、1度実行されたあとに自動で削除されます。わざわざ removeEventListener を呼ぶ必要がありません。
const button = document.getElementById('myButton');
// 無名関数でも問題なく1回で自動解除される
button.addEventListener('click', () => {
console.log('1回だけ実行されて自動削除されます');
}, { once: true });
まとめ：イベントをマスターして開発をもっと楽しく！
ここまでJavaScriptのイベントの基本から、各種イベントの種類、リスナの登録・削除まで一通り見てきました！
最後に、これから実装していく上で押さえておきたい4つの大事なポイントをおさらいしましょう！
- 処理の上書きを防ぎ、複数の動きを安全に登録できる
addEventListenerを使うのがモダン開発のスタンダードです - 不要になったリスナは
removeEventListenerで解放してあげるのが、サクサク動く軽いWebサイトを作るコツです。1回きりの動作なら{ once: true }を使うとさらにスマート！ - 入力された値を取得したり（
event.target.value）、勝手なページ移動を止めたり（event.preventDefault()）と、開発で役立つ便利な機能がぎゅっと詰まっています -
scrollやmousemoveなどの激しく発火するイベントは、必要に応じて間引き処理（デバウンスやスロットル）を取り入れるとパフォーマンスが格段にアップします！
おわりに
JavaScriptのイベント処理は、Webサイトに「動き」と「命」を吹き込む魔法のような仕組みです！
最初は覚えることが多く感じるかもしれませんが、自分の書いたコードで画面が思い通りに動いたときの感動は格別です✨
まずは小さなボタンのクリックイベントから、手元のブラウザで遊ぶ感覚で試してみてくださいね。
イベント制御をマスターして、ユーザーが使っていてワクワクするような、使い心地抜群のWebアプリケーションを一緒に作っていきましょう！🚀✨