js 事件流、事件冒泡、事件捕获、阻止事件的传播

事件流

js 事件的执行过程分为捕获阶段（由外层节点传播到内层节点）和冒泡阶段（由内层节点传播到外层节点），即先执行捕获阶段的代码，后执行冒泡阶段的代码

事件冒泡

js 事件中的代码默认在冒泡阶段执行，以下图为例，点击box2时，会依次触发box2的点击事件【冒泡阶段执行】、box1的点击事件【冒泡阶段执行】、window的点击事件【冒泡阶段执行】。

  window.addEventListener("click", function (e) {
    
    
    if (e.target.id === "box2") {
    
    
      console.log("点击box2触发window的click事件");
    } else if (e.target.id === "box1") {
    
    
      console.log("点击box1触发window的click事件");
    } else {
    
    
      console.log("触发了window的click事件");
    }
  });

  document.getElementById("box1").addEventListener("click", function (e) {
    
    
    console.log("触发了box1的click事件");
  });

  document.getElementById("box2").addEventListener("click", function (e) {
    
    
    console.log("触发了box2的click事件");
  });

事件捕获

给 addEventListener 函数的第三个参数传入 true ，便会将事件中的代码改为在捕获阶段执行，此时点击box2时，会依次触发window的点击事件【捕获阶段执行】，box2的点击事件【冒泡阶段执行】，box1的点击事件【冒泡阶段执行】。

  window.addEventListener(
    "click",
    function (e) {
    
    
      if (e.target.id === "box2") {
    
    
        console.log("点击box2触发window的click事件");
      } else if (e.target.id === "box1") {
    
    
        console.log("点击box1触发window的click事件");
      } else {
    
    
        console.log("触发了window的click事件");
      }
    },
    //改为在捕获阶段执行
    true
  );

  document.getElementById("box1").addEventListener("click", function (e) {
    
    
    console.log("触发了box1的click事件");
  });

  document.getElementById("box2").addEventListener("click", function (e) {
    
    
    console.log("触发了box2的click事件");
  });

阻止事件的传播

使用

e.stopPropagation()

范例：点击box2时，只触发box2的点击事件，不触发box1和window的点击事件

  window.addEventListener("click", function (e) {
    
    
    if (e.target.id === "box2") {
    
    
      console.log("点击box2触发window的click事件");
    } else if (e.target.id === "box1") {
    
    
      console.log("点击box1触发window的click事件");
    } else {
    
    
      console.log("触发了window的click事件");
    }
  });

  document.getElementById("box1").addEventListener("click", function (e) {
    
    
    console.log("触发了box1的click事件");
  });

  document.getElementById("box2").addEventListener("click", function (e) {
    
    
    console.log("触发了box2的click事件");
    // 阻止事件继续传播
    e.stopPropagation();
  });

实战范例

需求：

1. 点击box2时，只执行window点击事件中通过点击box2触发window点击事件的代码，不执行box1的点击事件代码
2. 点击box1时，只执行box1的点击事件代码，不执行window点击事件中通过点击box1触发window点击事件的代码

  window.addEventListener(
    "click",
    function (e) {
    
    
      if (e.target.id === "box2") {
    
    
        console.log("点击box2触发window的click事件");
        // 阻止事件继续传播
        e.stopPropagation();
      } else if (e.target.id === "box1") {
    
    
        return;
        console.log("点击box1触发window的click事件");
      } else {
    
    
        console.log("触发了window的click事件");
      }
    },
    true
  );

  document.getElementById("box1").addEventListener("click", function (e) {
    
    
    console.log("触发了box1的click事件");
  });

  document.getElementById("box2").addEventListener("click", function (e) {
    
    
    console.log("触发了box2的click事件");
  });