イベント
初級読み方：イベント｜英語：Event
ユーザーの操作（クリック・入力・キー押下など）のことで、addEventListener で反応させるよ。
やさしい説明
イベントとは、ユーザーの操作（クリック、キー入力など）やブラウザの動作のことです。JavaScriptでイベントを「監視」して、起きたときに処理を実行します。
ドアベルに例えると、ベルが鳴る（イベント発生）→ ドアを開ける（処理実行）という流れです。
addEventListener でイベントを登録します。「この要素で、このイベントが起きたら、この関数を実行してね」と指定します。
具体例・使い方
// ボタンクリックで処理を実行
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
console.log("クリックされました！");
});
// よく使うイベントの種類
// click → クリック
// dblclick → ダブルクリック
// input → テキスト入力（文字を打つたびに発火）
// change → 値が確定したとき（フォーカスが外れたとき）
// submit → フォーム送信
// keydown → キーを押したとき
// mouseover → マウスが乗ったとき
// load → ページ読み込み完了イベントオブジェクトを使う
// イベントリスナーの第1引数にイベント情報が渡される
btn.addEventListener("click", (e) => {
console.log(e.target); // クリックされた要素
console.log(e.type); // "click"
e.preventDefault(); // デフォルト動作をキャンセル（リンク遷移など）
e.stopPropagation(); // 親要素へのイベント伝播を止める
});
// フォーム送信のキャンセルでバリデーション
form.addEventListener("submit", (e) => {
e.preventDefault(); // ページ遷移を止める
// バリデーション処理...
});コールバック関数の第1引数（慣例で e や event）には、イベントの詳細情報が入ります。クリック座標・押されたキー・入力値など、イベントに応じた情報を取得できます。
いつ使う？
- ボタンクリックで処理を実行するとき
- フォーム送信時にバリデーションするとき
- テキスト入力に応じてリアルタイムで画面を更新するとき
- スクロールやマウス移動でアニメーションを発動するとき
- キーボードショートカットを実装するとき
間違いやすいポイント
❌ addEventListenerの関数に () をつけてしまう
() をつけると「関数を渡す」ではなく「今すぐ実行してその結果を渡す」になります。イベントリスナーには関数名だけ（() なし）を渡しましょう。
// ❌ ()をつけると即実行されてしまう
btn.addEventListener("click", handleClick());
// ✅ 関数名だけ渡す（()なし）
btn.addEventListener("click", handleClick);
// ✅ アロー関数で渡すのもOK
btn.addEventListener("click", () => handleClick());よくある疑問
Q: onclickとaddEventListenerの違いは？
A: addEventListenerは複数のイベントを登録でき、より柔軟です。現代ではaddEventListenerが推奨されます。
Q: イベントオブジェクトとは？
A: イベント発生時に自動で渡されるオブジェクトです。e.target（クリックされた要素）、e.preventDefault()（デフォルト動作の停止）などが使えます。
Q: イベントの種類は？
A: click（クリック）、input（入力）、submit（送信）、keydown（キー押下）、scroll（スクロール）、load（読み込み完了）などがあります。
関連用語
📖 関連レッスン
レッスンを見る →