イベント
初級読み方：イベント｜英語：Event
ユーザーの操作（クリック・入力・キー押下など）のことで、addEventListener で反応させるよ。いつ使う？ ボタンをクリックしたら何かする、フォームに入力したらリアルタイムで検証する、キーを押したらショートカットを実行するときに使うよ。間違いやすいポイント: addEventListener の第2引数に関数を「呼び出して」渡すとすぐ実行されてしまうよ。fn() ではなく fn と書こう。
やさしい説明
イベントとは、ユーザーの操作（クリック、キー入力など）やブラウザの動作のことです。JavaScriptでイベントを「監視」して、起きたときに処理を実行します。
ドアベルに例えると、ベルが鳴る（イベント発生）→ ドアを開ける（処理実行）という流れです。
addEventListener でイベントを登録します。「この要素で、このイベントが起きたら、この関数を実行してね」と指定します。
具体例・使い方
// ボタンクリックで処理を実行
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
alert("クリックされました！");
});
// よく使うイベント
// click → クリック
// input → テキスト入力
// submit → フォーム送信
// keydown → キーを押したとき
// load → ページ読み込み完了いつ使う？
ボタンクリックで何かする、フォーム送信時にバリデーションする、スクロールでアニメーションを発動する——ユーザーの操作に反応するときは必ずイベントを使います。
間違いやすいポイント
❌ addEventListenerの関数に()をつけてしまう
// ❌ ()をつけると即実行されてしまう
btn.addEventListener("click", handleClick());
// ✅ 関数名だけ渡す（()なし）
btn.addEventListener("click", handleClick);よくある疑問
Q: onclickとaddEventListenerの違いは？
A: addEventListenerは複数のイベントを登録でき、より柔軟です。現代ではaddEventListenerが推奨されます。
Q: イベントオブジェクトとは？
A: イベント発生時に自動で渡されるオブジェクトです。e.target（クリックされた要素）、e.preventDefault()（デフォルト動作の停止）などが使えます。
Q: イベントの種類は？
A: click（クリック）、input（入力）、submit（送信）、keydown（キー押下）、scroll（スクロール）、load（読み込み完了）などがあります。
関連用語
📖 関連レッスン
レッスンを見る →