上篇筆記提到了事件的修飾符，其中不少是與事件冒泡相關的，於是這篇來大致總結一下。

· 事件冒泡

當一個元素接收到事件時，會把“接收事件”這個行為傳遞給自己的父級，比如在<p>上發生事件，那麼順序為：p -> div -> body -> html -> document （冒泡過程）

這裡要注意的是，傳遞的僅僅是這個事件，而不是事件所繫結的函式，如果父級沒有繫結函式，那麼是不會有任何效果產生的（但事件確實傳遞了）。

舉個例子：

  <div @click="one">
    我是div1
    <div @click="two">
      我是div2
      
 
<div @click="three">
        我是div3
        <div @click="four">
          我是div4
        </div>
      </div>
    </div>

① 點選div4區域

② 點選div2區域

③ 如果說，此時div3上沒有繫結事件，那麼點選div4區域時

· 事件捕獲

與事件冒泡相反，事件會從最外層往最裡層一級一級傳遞，直到最具體的元素。同樣拿<p>來舉例，那麼它的順序為：document -> html -> body -> div -> p （捕獲過程）

舉個例子：

<div @click.capture="one">
    我是div1
    <div @click.capture="two">
      我是div2
      <div @click.capture="three">
        我是div3
        <div @click.capture="four">
          我是div4
        </div>
      </div>
    </div>
  </div>

① 點選div4區域

② 點選div2區域

③ 如果說，此時div3上沒有繫結事件，那麼點選div4區域時