718_DOM事件流三个阶段

<script>
      //DOM事件流三个阶段
      //1、js代码中只能执行捕获阶段或者冒泡其中的一个阶段
      //2、捕获阶段，如果addEventListener第三个参数为true则处于捕获阶段document-html-body-father-son(father先弹出)

      var son = document.querySelector(".son");
      var father = document.querySelector(".father");
      //   son.addEventListener(
      //     "click",
      //     () => {
      //       alert("son");
      //     },
      //     true
      //   );

      //   father.addEventListener(
      //     "click",
      //     () => {
      //       alert("father");
      //     },
      //     true
      //   );

      //3、冒泡阶段，如果addEventListener第三个参数为false或者省略则处于冒泡阶段son-father-body-html-document(son先弹出)
      son.addEventListener(
        "click",
        (e) => {
          alert("son");
          e.cancelBubble = true;
        },
        false
      );

      father.addEventListener("click", () => {
        alert("father");
      });
    </script>