Frontend Academy · レッスン

addEventListenerとEventオブジェクト

イベントリスナーを登録し、Eventオブジェクトを受け取り、preventDefaultとstopPropagationを使い、イベントバブリングを理解します。

「addEventListenerとEventオブジェクト」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

イベントとは

イベントは、何かが起きたときにブラウザーが発生させるシグナルです。ユーザーのクリック、キーの押下、マウスの移動、ページの読み込み、ネットワークリクエストの完了などが該当します。JavaScript はイベントリスナーを登録してイベントに反応します。

addEventListenerの構文

element.addEventListener(type, handler) は、イベントが発生したときに実行する関数を登録します。ハンドラーは、発生した内容の詳細を含む Event オブジェクトを受け取ります。

const button = document.querySelector('#submit');
button.addEventListener('click', (event) => {
  console.log('Button clicked!', event);
});

一般的なイベントの種類

マウス: click、dblclick、mouseenter、mouseleave、mousemove。キーボード: keydown、keyup、keypress。フォーム: submit、input、change、focus、blur。ドキュメント: DOMContentLoaded、load。ウィンドウ: resize、scroll。

// Form events:
input.addEventListener('input', (e) => console.log(e.target.value));
form.addEventListener('submit', handleSubmit);

// Window events:
window.addEventListener('resize', () => console.log(window.innerWidth));

イベントオブジェクト

すべてのハンドラーは Event オブジェクトを受け取ります。主なプロパティは、e.target（イベントを発生させた要素）、e.currentTarget（リスナーが登録されている要素）、e.type（イベント名）、e.timeStamp です。

document.addEventListener('click', (e) => {
  console.log(e.type);          // 'click'
  console.log(e.target);        // element that was clicked
  console.log(e.currentTarget); // element with the listener (document)
  console.log(e.timeStamp);     // ms since page load
});

preventDefault()

event.preventDefault() は、ブラウザーのデフォルト動作を停止します。フォームの送信やリンクの移動を防いだり、ゲームで右クリックのコンテキストメニューを停止したりするために使用します。

form.addEventListener('submit', (e) => {
  e.preventDefault(); // stop page reload
  // validate and process form data with JavaScript
});

link.addEventListener('click', (e) => {
  e.preventDefault(); // handle SPA navigation manually
  router.navigate(e.target.href);
});

stopPropagation()

event.stopPropagation() は、イベントが DOM ツリーを通じて上方向にバブリングするのを停止します。内側の要素のハンドラーによって外側の要素のハンドラーが呼び出されないようにする場合に使用します。

modal.addEventListener('click', (e) => {
  e.stopPropagation(); // don't close modal when clicking inside it
});
document.addEventListener('click', () => {
  closeModal(); // only fires for clicks outside modal
});

イベントバブリング

イベントは上方向にバブリングします。ターゲットで発生した後、親要素、祖父母要素へと伝わり、最終的に document まで到達します。これがイベントデリゲーションの仕組みです。親要素に1つのリスナーを登録し、e.target で実際にクリックされた子要素を特定します。

// One listener handles all button clicks in the container:
document.querySelector('.btn-group').addEventListener('click', (e) => {
  if (e.target.matches('button')) {
    console.log('Clicked:', e.target.textContent);
  }
});

イベントデリゲーションパターン

イベントデリゲーションとは、すべての子要素にリスナーを登録する代わりに、親要素でイベントを監視する方法です。より効率的で、動的に追加された子要素も自動的に処理できます。

// Instead of:
list.querySelectorAll('li').forEach(li => li.addEventListener('click', handleClick));

// Use delegation:
list.addEventListener('click', (e) => {
  if (e.target.closest('li')) handleClick(e);
});

キーボードイベント

キーボードイベントは、キーが押されたときに発生します。現代的なコードでは、e.key（'Enter'、'Escape'、'a' のような文字列）を使用してください。古いコードでは e.keyCode が使われていましたが、現在は非推奨です。e.metaKey、e.ctrlKey、e.shiftKey で修飾キーを検出できます。

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') closeModal();
  if (e.key === 'Enter' && e.ctrlKey) submitForm();
});

イベントリスナーの削除

removeEventListener を使用してリスナーを取り外します。ハンドラーは同じ関数参照でなければならないため、無名関数は削除できません。React/Vue では通常、これを手動で管理する必要はありません。

function handleScroll() { /* ... */ }
window.addEventListener('scroll', handleScroll);
// Later, when done:
window.removeEventListener('scroll', handleScroll);

onceオプション

第3引数として { once: true } を渡すと、リスナーが1回実行された後に自動的に削除されます。スプラッシュ画面の閉じる処理など、1回だけ実行するアクションに便利です。

document.querySelector('#start').addEventListener('click', startApp, { once: true });

captureオプション

デフォルトでは、リスナーはバブリングフェーズ（上方向）で実行されます。{ capture: true } を渡すと、キャプチャリングフェーズ（下方向、ターゲット自身のリスナーより前）で実行されます。

確認問題

イベントに対するブラウザーのデフォルト動作を停止するメソッドはどれですか？

まとめ: DOMイベント

addEventListener(type, handler) でリスナーを登録します。Event オブジェクトは target、type、制御用メソッドを提供します。preventDefault() はデフォルト動作を阻止します。stopPropagation() はバブリングを停止します。効率化と動的な子要素への対応にはイベントデリゲーションを使用します。メモリリークを防ぐため、リスナーを削除してください。

よくある質問

「addEventListenerとEventオブジェクト」レッスンは無料ですか？

はい。「addEventListenerとEventオブジェクト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「addEventListenerとEventオブジェクト」で何を学びますか？

イベントリスナーを登録し、Eventオブジェクトを受け取り、preventDefaultとstopPropagationを使い、イベントバブリングを理解します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「addEventListenerとEventオブジェクト」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

querySelectorとquerySelectorAll
addEventListenerとEventオブジェクト
コンテンツの変更: textContent、innerHTML、classList
要素の作成と追加

← Frontend Academyに戻る