event.preventDefault() と event.stopPropagation()

DOMイベントにおける event.preventDefault() と event.stopPropagation() は、イベント処理の流れを制御するための重要なメソッドです。両者は似ているように見えますが、目的と作用範囲が異なります。以下で詳しく説明します。

---

1. event.preventDefault()

概要

• 既定の動作（ブラウザが本来行う動作）をキャンセルするためのメソッドです。

• イベントの伝播（キャプチャリングやバブリング）には影響を与えません。

使用例

• リンク（<a>タグ）のクリック時にページ遷移を止める。

• フォーム送信時にページリロードを防ぐ。

html
<a href="https://example.com" id="link">リンク</a>

<script>
document.getElementById("link").addEventListener("click", function(event) {
  event.preventDefault(); // 本来のリンク遷移を止める
  console.log("リンクの既定動作をキャンセルしました");
});
</script>

---

2. event.stopPropagation()

概要

• イベントの伝播（親要素や子要素へのイベントバブリング／キャプチャリング）を止めるメソッドです。

• ただし、要素自体の既定の動作は止めません。

使用例

• 入れ子の要素にクリックイベントが設定されている場合、内側で処理して外側に伝わらないようにする。

html
<div id="outer" style="padding:20px; background:lightblue;">
  Outer
  <div id="inner" style="padding:20px; background:lightgreen;">
    Inner
  </div>
</div>

<script>
document.getElementById("outer").addEventListener("click", function() {
  console.log("外側がクリックされました");
});

document.getElementById("inner").addEventListener("click", function(event) {
  event.stopPropagation(); // 外側へのバブリングを防ぐ
  console.log("内側がクリックされました");
});
</script>

この場合、inner をクリックしても outer のイベントは発火しません。

---

3. preventDefault() と stopPropagation() の違い

---

4. 両方を使う場合

実際の開発では 両方を同時に使う ケースもあります。
例えば、フォームの送信ボタンをクリックした時に、送信動作を止めてカスタム処理だけを行い、さらに他の親要素にイベントが伝わらないようにするケースです。

html
<form id="myForm">
  <button type="submit" id="submitBtn">送信</button>
</form>

<script>
document.getElementById("submitBtn").addEventListener("click", function(event) {
  event.preventDefault();     // フォーム送信（リロード）を防ぐ
  event.stopPropagation();    // 親要素への伝播を防ぐ
  console.log("カスタム送信処理を実行しました");
});
</script>

---

✅ まとめ

• event.preventDefault() → ブラウザの「既定の動作」を止める。

• event.stopPropagation() → イベントの「伝播」を止める。

• 目的が違うため、必要に応じて使い分け、または併用する。