事件流、事件捕获 和 事件冒泡

事件流

当事件发生时，会在发生事件的元素节点与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();
  });