冒泡事件相信很多人多聽過，但是具體什麼是冒泡事件，有些人估計還是不太清楚！

我在這裡簡單的說明一下：

冒泡事件：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標籤。

來個例子吧，這樣清晰一點：

<div class="div1" onclick="fun1();">
  <div class="div2" onclick="fun2();">
    <div class="div3" onclick="fun3();">div3</div>div2
  </div>div1
</div>

首先寫一個html 檔案；
樣式嗎，我就隨便謝謝啦，這裡也貼出來

  .div1{width: 300px;height: 300px;background: #f0ad4e;}
  .div2{width: 200px;height: 200px;background: #00deff;}
  .div3{width: 100px;height: 100px;background: #9B410E;}

得到的樣式就是這樣：

然後對應的js就是：

  function fun1() {
      console.log("div1")
  }
  function fun2() {
      console.log("div2")
  }
  function fun3
 
() {
      console.log("div3")
  }

這裡我們希望，點選div3。就會列印div3,點選div2。就會列印div2,點選div1。就會列印div1.

但是，我們點選div3時會出現：

他會執行fun1,fun2,fun3三個方法；
但是我們希望 他只執行fun3,

這裡我們就要 阻止冒泡事件，
阻止冒泡事件只需

<div class="div3" onclick="fun3(event);">div3</div>div2

  function fun3(e) {
      console.log("div3")
      e.stopPropagation(); // 用這個
 

  }

就可以啦，這是點選div3，就只會列印div3啦，是不是很簡單！

更多補充，敬請期待