イベント ストリーミング、イベント キャプチャ、およびイベント バブリング

イベントの流れ

イベントが発生すると、イベントが発生した要素ノードと DOM ツリーのルート ノードの間で特定の順序で伝播されるプロセスをイベント フローと呼びます。[ページがイベントをトリガーすると、特定の順序でイベントに応答します。イベント応答プロセスはイベント フローと呼ばれます。】

イベントのキャプチャとイベントのバブリング

target.addEventListener(イベントの種類、コールバック関数、キャプチャの有無)

パラメータ 3:

(1) false（默认）、イベント処理はバブリング フェーズで完了します。

(2) true、キャプチャ フェーズでイベント処理が完了します。

例 1

    <div id="grandpa">
      <div id="parent">
        <div id="son"></div>
      </div>
    </div>

    <script>
      var grandpa = document.getElementById("grandpa");
      var parent = document.getElementById("parent");
      var son = document.getElementById("son");

      document.addEventListener("click", function (e) {
      
      
        console.log("===click document===");
      });

      grandpa.addEventListener("click", function (e) {
      
      
        console.log("===click grandpa===");
      });

      parent.addEventListener("click", function (e) {
      
      
        console.log("===click parent===");
      });

      son.addEventListener("click", function (e) {
      
      
        console.log("===click son===");
      });
    </script>

例 2

  document.addEventListener(
    "click",
    function (e) {
    
    
      console.log("===click document===");
    },
    true // 在捕获阶段完成事件处理
  );

  grandpa.addEventListener(
    "click",
    function (e) {
    
    
      console.log("===click grandpa===");
    },
    true // 在捕获阶段完成事件处理
  );

  parent.addEventListener("click", function (e) {
    
    
    console.log("===click parent===");
  });

  son.addEventListener("click", function (e) {
    
    
    console.log("===click son===");
  });

例 3

 document.addEventListener("click", function (e) {
    
    
        console.log("===click document===");
      });

      grandpa.addEventListener("click", function (e) {
    
    
        console.log("===click grandpa===");
      });

      parent.addEventListener(
        "click",
        function (e) {
    
    
          console.log("===click parent===");
        },
        true  // 在捕获阶段完成事件处理
      );

      son.addEventListener("click", function (e) {
    
    
        console.log("===click son===");
      });

例 4 イベントのバブリングを防ぐ

  son.addEventListener("click", function (e) {
    
    
    console.log("===click son===");
    e.stopPropagation();
  });