js事件流：捕獲階段和冒泡階段

事件流：

事件流包含三個階段：
事件捕捉階段：事件開始由頂層對象觸發，然後逐級向下傳播，直到目標元素；
處於目標階段：處在綁定事件的元素上；
事件冒泡階段：事件由具體的元素先接收，然後逐級向上傳播，直到不具體的元素；

通過代碼示例說明：

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

<div id="a">
  最外層的元素
  <div id="b">
    中間的元素
    <div id="c">
      最裏面的元素
    </div>
  </div>
</div>

<script>
  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
    );
  }
</script>

點擊最裏邊的元素觸發結果如下：

參考

1. JavaScript事件委託與事件冒泡
2. HTML DOM 元素對象