js事件流：捕获阶段和冒泡阶段

事件流：

事件流包含三个阶段： 事件捕捉阶段：事件开始由顶层对象触发，然后逐级向下传播，直到目标元素； 处于目标阶段：处在绑定事件的元素上； 事件冒泡阶段：事件由具体的元素先接收，然后逐级向上传播，直到不具体的元素；

通过代码示例说明：

  #a {
    width: 300px;
    height: 300px;
    background-color: #eeeeee;
  }
  #b {
    width: 200px;
    height: 200px;
    background-color: #666666;
  }
  #c {
    width: 100px;
    height: 100px;
    background-color: green;
  }



  最外层的元素
  
    中间的元素
    
      最里面的元素
    
  



  const list = ["a", "b", "c"];

  for (let elementId of list) {
    document.getElementById(elementId).addEventListener(
      "click",
      function () {
        console.log("捕获阶段: ", this.firstChild.textContent.trim());
      },
      true
    );

    document.getElementById(elementId).addEventListener(
      "click",
      function () {
        console.log("冒泡阶段", this.firstChild.textContent.trim());
      },
      false
    );
  }

点击最里边的元素触发结果如下：

参考

1. JavaScript事件委托与事件冒泡
2. HTML DOM 元素对象