JavaScript における event.stopPropagation と event.preventDefault の違い

Muhammad Muzammil Hussain 2024年2月15日

JavaScript JavaScript Propagation

伝播の概念
伝播の段階
JavaScript の stopPropagation()
JavaScript の preventDefault()

JavaScript における event.stopPropagation と event.preventDefault の違い

この記事では、stopPropagation() の目的と JavaScript ソースコードでのその動作について学びます。また、stopPropagation() イベントを使用して JavaScript での伝播を防ぐ方法についても説明します。

伝播の概念

Web 開発では、DOM は、相互に関連する (親、子、兄弟) などの要素を含むツリーと見なされます。伝播は、ドキュメントオブジェクトモデル (DOM) ツリーを通過するイベントの概念です。

伝播をよりよく理解するために、例として電線を使用します。この電線では、定義された目的地に到達するまで電流が流れています。イベントは、最後のノードに到達するまで、DOM のすべてのノードを通過します。

伝播の段階

イベントのバブリングとキャプチャは、伝播のフェーズです。簡単に言えば、バブリングはターゲットノードからルートに移動し、キャプチャリングは逆にバブリングに移動します。ルートノードからターゲットに移動します。

ボタンクリックなどのイベントをトリガーするために使用される DOM ノードはターゲットと呼ばれ、クリックイベントを持つボタンはイベントターゲットです。

JavaScript の `stopPropagation()`

デフォルトの伝播動作では、ボタンをクリックすると、途中で同じタイプに関連付けられているすべてのイベントハンドラーがトリガーされます。この種の動作は実現不可能であり、パフォーマンスの問題を引き起こします。

DOM ツリーを介したこの伝播動作を防ぐために、stopPropagation() イベントを使用します。そのイベントを使用して、それがトリガーされた唯一のイベントハンドラーを実行できます。

基本的な構文:

event.stopPropagation()

stopPropagation() メソッドは、同じイベントの伝搬動作が呼び出されないようにするために使用されます。

コード例:

<!DOCTYPE html>
<html>
   <body>
      <style>
         .myDiv {
         border: 2px outset black;
         padding: 30px;
         text-align: center;
         }
      </style>
      <h1 style="color:blueviolet">DelftStack Learning</h1>
      <h3>JavaScript stop propagation event</h3>
      <p>Click on CHILD DIV</p>
      <div class="myDiv" onclick="parentFunction()">
         PARENT DIV
         <div class="myDiv" onclick="childFunction(event)">CHILD DIV</div>
      </div>
      Prevent Propagation:
      <input type="checkbox" id="check">
      <script>
         function childFunction(event) {
           console.log("Child div event executed ..");
           if (document.getElementById("check").checked) {
             event.stopPropagation(); // preventing propagation
           }
         }
         
         function parentFunction() {
           console.log("Parent div event executed ..");
         }
      </script>
   </body>
</html>

伝播による出力:

伝播で出力

伝播なしの出力:

伝播ありの出力

上記の HTML ソースでは、親 div 内に子 div を作成し、その div の onClick イベントで、別の関数を呼び出しました。

<script> タグでは、実行されたイベントをログに表示する parentfunction() と childFunction() を宣言しています。 childFunction() では、event を引数として渡し、そのイベントを使用して伝播を停止しました。

伝播を防止したいかどうかにかかわらず、ユーザーから現在の状態を取得するためのチェックボックス要素を作成しました。 childFunction() では、条件ステートメントを使用して、チェックボックスがオンかどうかを調べます。

チェックされている場合は、event.stopPropagation(); を呼び出しただけです。伝播を防ぐために。ユーザーがチェックボックスを選択して CHILD DIV をクリックすると、childFunction() のみが実行されます。それ以外の場合、両方の関数が実行されます。

上記のソースを HTML 拡張子で保存し、ブラウザで開きます。結果を確認するには、コンソールタブと共にデバッガーモードを開きます。

JavaScript の `preventDefault()`

event.stopPropagation() メソッドは、リンクのクリックやチェックボックスなど、HTML 要素のデフォルトの動作を停止するのには役に立ちません。これを実現するには、event.preventDefault() を使用できます。

そのイベントでブラウザが行うデフォルトのアクションを防ぎます。したがって、preventDefault() メソッドを使用すると、ブラウザのデフォルトアクションのみが防止されますが、div のクリックハンドラは引き続きトリガーされます。

コード例:

function childFunction(event) {
  console.log('Child div event executed ..');
  if (document.getElementById('check').checked) {
    event.preventDefault();  // preventing default action
  }
}

上記の JavaScript 関数 childFunction() では、event.stopPropagation() を event.preventDefault() に置き換えて、ログで動作の違いを確認しました。

伝播の概念

伝播の段階

JavaScript の stopPropagation()

JavaScript の preventDefault()

JavaScript の `stopPropagation()`

JavaScript の `preventDefault()`