JavaScript Academy · レッスン

preventDefault と stopPropagation

Q: 「preventDefault と stopPropagation」で何を学びますか？

デフォルト動作とバブリングを制御します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

デフォルト動作とバブリングを制御します。

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

イベントの動作を制御する

イベントを制御する仕組みは2つあります。ブラウザーのデフォルト動作を停止する方法と、イベントがDOM内を伝播するのを停止する方法です。

デフォルト動作

多くの要素には組み込みのデフォルト動作があります。リンクは移動し、フォームの送信ではページが再読み込みされ、チェックボックスは切り替わります。これらは介入しない限り実行されます。

preventDefault

event.preventDefaultは、ハンドラーの実行を維持したまま、ブラウザーのデフォルト動作をキャンセルします。

link.addEventListener("click", (e) => {
  e.preventDefault(); // stop navigation
  console.log("handled in JS");
});

フォームでのpreventDefault

よくある用途は、フォーム送信時のページ再読み込みを停止し、JavaScriptで送信処理を行うことです。

form.addEventListener("submit", (e) => {
  e.preventDefault();
  // send data via fetch instead
});

イベント伝播

イベントは対象に到達した後、祖先要素をバブリングしながら上へ伝播し、それらのリスナーを実行します。そのため、子要素のクリックで親要素のハンドラーも実行されます。

stopPropagation

event.stopPropagationは、イベントが祖先要素へ伝播し続けるのを防ぎます。現在のハンドラーの処理は最後まで実行されます。

child.addEventListener("click", (e) => {
  e.stopPropagation(); // parent listeners will not fire
});

preventDefaultとstopPropagationの違い

これらは独立した機能です。preventDefaultはブラウザーの動作をキャンセルし、stopPropagationは他の要素への伝播を停止します。どちらか一方、両方、またはどちらも使用しないという選択ができます。

e.preventDefault();   // no default action
e.stopPropagation();  // no bubbling

同じ要素に設定された他のリスナー

stopPropagationは、同じ要素に設定された他のリスナーの実行を停止しません。それらは引き続き実行されます。

el.addEventListener("click", (e) => e.stopPropagation());
el.addEventListener("click", () => console.log("still runs"));

stopImmediatePropagation

stopImmediatePropagationはさらに強力です。バブリングを停止するだけでなく、同じ要素に残っているリスナーの実行も防ぎます。

el.addEventListener("click", (e) => e.stopImmediatePropagation());
el.addEventListener("click", () => console.log("does NOT run"));

defaultPrevented

event.defaultPreventedを確認すると、前のハンドラーですでにpreventDefaultが呼び出されたかどうかを確認できます。

el.addEventListener("click", (e) => {
  console.log(e.defaultPrevented);
});

必要な場合に限定して使用する

伝播を停止すると、ページの別の場所にあるイベント委譲を壊す可能性があります。本当に必要な場合に限って使用し、イベント委譲に適した代替方法も検討してください。

クイックチェック

適切なメソッドを選んでください。

まとめ

preventDefaultは、ブラウザーのデフォルト動作（移動、送信など）をキャンセルします。stopPropagationはイベントが祖先要素へバブリングするのを停止し、stopImmediatePropagationは同じ要素に設定された他のリスナーもブロックします。これらは独立した機能です。イベント委譲を壊さないよう、伝播を停止する機能は必要な場合に限って使用してください。

よくある質問

「preventDefault と stopPropagation」レッスンは無料ですか？

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

「preventDefault と stopPropagation」で何を学びますか？

デフォルト動作とバブリングを制御します。ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「preventDefault と stopPropagation」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← JavaScript Academyに戻る