0Pricing
JavaScript Academy · レッスン

addEventListener の基本

イベント用のハンドラーを要素に登録します。

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

イベントに応答する

イベントを使うと、クリック、キー入力、フォーム送信などのユーザー操作にコードで反応できます。addEventListenerが、イベントを購読する標準的な方法です。

基本構文

イベント名とハンドラー関数を指定してaddEventListenerを呼び出します。イベントが発生するたびにハンドラーが実行されます。

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  console.log("Clicked!");
});

名前付きハンドラー

名前付き関数を渡すこともできます。コードを整理しやすくなり、重要な点として、後からリスナーを削除できるようになります。

function handleClick() {
  console.log("Clicked!");
}
btn.addEventListener("click", handleClick);

複数のリスナー

古いonclickプロパティとは異なり、互いに上書きすることなく、同じイベントに複数のリスナーを設定できます。

btn.addEventListener("click", logClick);
btn.addEventListener("click", trackAnalytics);

removeEventListener

イベントの監視を停止するには、追加時に使用したものと同じイベント名と関数参照を指定してremoveEventListenerを呼び出します。

btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);

匿名関数は削除できません

インラインのアロー関数は呼び出すたびに新しい参照を作成するため、後から削除できません。削除する必要がある場合は、名前付きの参照を使用してください。

btn.addEventListener("click", () => doThing());
// no way to remove this exact listener

onceオプション

{ once: true }を渡すと、リスナーは1回だけ実行された後、自動的に削除されます。

btn.addEventListener("click", init, { once: true });

captureオプション

デフォルトでは、リスナーはバブリングフェーズで実行されます。{ capture: true }を指定すると、代わりにキャプチャリングフェーズで実行されます。

parent.addEventListener("click", handler, { capture: true });

passiveオプション

{ passive: true }を指定すると、preventDefaultを呼び出さないことをブラウザーに約束できます。これにより、ブラウザーはスクロールのパフォーマンスを最適化できます。

window.addEventListener("scroll", onScroll, { passive: true });

signalオプション

AbortControllerのシグナルを使うと、abortすることで1つまたは複数のリスナーを削除できます。後片付けに便利です。

const controller = new AbortController();
btn.addEventListener("click", handler, { signal: controller.signal });
controller.abort(); // removes the listener

ハンドラー内のthis

通常の関数ハンドラーでは、thisはリスナーが設定されている要素を指します。アロー関数はthisを再束縛しません。

btn.addEventListener("click", function () {
  console.log(this); // the button element
});

クイックチェック

削除のルールを確認してください。

まとめ

addEventListener(type, handler, options)はイベントを購読し、複数のリスナーに対応します。removeEventListenerで削除する際は同じ参照を使用するため、名前付き関数を優先してください。便利なオプションにはonce、capture、passive、signalがあります。通常のハンドラーでは、thisは対象の要素を指します。

よくある質問

「addEventListener の基本」レッスンは無料ですか？

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

「addEventListener の基本」で何を学びますか？

イベント用のハンドラーを要素に登録します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「addEventListener の基本」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. addEventListener の基本
  2. イベントオブジェクト
  3. preventDefault と stopPropagation
  4. キーボードイベントとマウスイベント
← JavaScript Academyに戻る