JavaScriptイベント処理入門

イベント処理とは？

Webページ上の要素に対して、ユーザーの操作に応じて処理を実行するのが「イベント処理」です。
たとえば、ボタンをクリックしたときにメッセージを表示したり、フォーム入力を検知して内容を確認したりできます。

よく使うイベントの種類

代表的なイベントには、次のようなものがあります。

• click：クリックされたとき
• mouseover：マウスが乗ったとき
• keydown：キーが押されたとき
• submit：フォームが送信されたとき

イベント処理の基本構文

イベント処理を行うには、次のようなコードを書きます。

document.getElementById('myButton').addEventListener('click', function() {
  alert('ボタンがクリックされました！');
});

書き方のポイント

イベントを設定する対象（例：ボタンなど）を正しく取得する必要があります。
関数内の処理は無名関数で書くか、別で定義した関数を渡す方法もあります。

実際に書いてみよう

ボタンをクリックしたときに背景色が変わる簡単な例を見てみましょう。

document.getElementById('colorBtn').addEventListener('click', function() {
  document.body.style.backgroundColor = 'lightblue';
});

まとめ

• JavaScriptのイベント処理は、ユーザーの操作に応じてコードを実行する仕組み
• よく使うイベントには、click、submit、keydown などがある
• addEventListener を使って、対象要素にイベントを設定する
• 処理内容は無名関数または別に定義した関数で書くことができる
• 実践しながら、少しずつイベントの種類や使い方に慣れていくのがコツ