イベント / イベントリスナー

概要（サマリー）

イベントとは、ブラウザ上でユーザーが行う操作や、ページ内で起きる出来事のことである。クリック、キーボード入力、マウス移動、ページの読み込み完了などがイベントにあたる。

イベントリスナーとは、「このイベントが起きたときにこの処理を実行する」とブラウザに登録しておく仕組みのことである。JavaScriptの addEventListener() を使って登録する。

AIにWebページの操作機能を作ってもらうと、ほぼ必ずイベントリスナーのコードが登場する。「ボタンをクリックしたら計算する」「フォームを送信したら確認ダイアログを出す」といった動作はすべてこの仕組みで実現されている。

詳細解説

基本的な書き方

const btn = document.querySelector('#my-btn');
btn.addEventListener('click', function() {
  alert('ボタンが押されました');
});

addEventListener(イベント名, 実行する関数) の形で登録する。最初の引数にイベントの種類を文字列で指定し、2番目の引数に処理を関数として渡す。

ここで注意したいのは、関数を「その場で実行する」のではなく「あとで実行する処理として渡す」点である。

btn.addEventListener('click', showMessage);   // 良い例
btn.addEventListener('click', showMessage()); // 悪い例

showMessage() と書くと、クリックを待たずにその場で関数が実行されてしまう。イベントが起きたときに実行したい場合は、関数名だけを渡すか、function() { ... } や () => { ... } の形で渡す。

主なイベントの種類

イベントオブジェクト

イベントリスナーに登録した関数は、実行時にイベントオブジェクト（慣習的に e や event という名前を使う）を受け取ることができる。クリックされた座標、押されたキーの種類、対象の要素などの情報が入っている。

document.addEventListener('keydown', function(e) {
  console.log(e.key);
});

たとえば e.target を使うと、実際にイベントが発生した要素を確認できる。フォーム送信のときは e.preventDefault() を使って、ページの再読み込みを止めることも多い。

form.addEventListener('submit', function(e) {
  e.preventDefault();
  console.log(e.target);
});

このコードでは、フォーム送信時の標準動作を止めてから、送信されたフォーム要素を確認している。入力チェックや確認メッセージを出す処理でよく使われる。

DOM操作との関係

イベントリスナーは、DOM操作と組み合わせて使われることが多い。イベントで「何が起きたか」を受け取り、その結果として画面のテキスト、クラス、表示状態などを変更する。

const button = document.querySelector('button');
const box = document.querySelector('.box');

button.addEventListener('click', function() {
  box.classList.toggle('active');
});

この例では、ボタンがクリックされるたびに .box の active クラスを付け外ししている。クリック、入力、送信などのイベントをきっかけにDOMを変更するのが、Webページに動きを付ける基本である。

AIコーディングとイベントリスナーの関係

AIにWebページの機能を作らせると、ボタン、フォーム、メニュー、モーダル、タブ切り替えなどでイベントリスナーがよく使われる。生成されたコードを読むときは、「どの要素に」「どのイベントを」「どの処理として」登録しているかを見ると理解しやすい。

動かない場合は、要素の取得に失敗していないか、イベント名が間違っていないか、関数を handler() のように実行して渡していないかを確認する。開発者ツールのConsoleパネルに出るエラーをAIに渡すと、原因を絞り込みやすい。

よくある勘違い

addEventListener は1つの要素に1回しか使えない？

同じ要素に何度でも addEventListener() を呼び出してよい。異なるイベント種類を複数登録することも、同じイベント種類に複数の関数を登録することも可能だ。

イベントはクリックだけ？

クリックは代表的なイベントだが、それだけではない。入力欄の変更、フォーム送信、キー入力、ページ読み込み、マウス移動などもイベントである。ユーザー操作だけでなく、ブラウザ内で起きる出来事もイベントとして扱われる。

関数名には必ず () を付ける？

イベントリスナーに関数を渡すときは、基本的に showMessage のように関数名だけを書く。showMessage() と書くと、その場で実行した結果を渡すことになり、クリック時に動かない原因になりやすい。

onclick と addEventListener() は同じ？

どちらもクリック時の処理を登録できるが、addEventListener() の方が複数の処理を登録しやすく、イベントの種類も整理しやすい。現代のJavaScriptでは、基本的に addEventListener() を使うことが多い。

より詳しくAIに聞いてみよう

• クリック以外によく使うイベントの種類と使い方を教えてください。
• イベントの「バブリング」とはどんな仕組みですか？
• addEventListener と onclick の違いを教えてください。
• イベントリスナーに関数名だけを渡す場合と () を付ける場合の違いを説明してください。
• フォーム送信時に preventDefault() を使う理由を初心者向けに教えてください。