在講事件代理前，要先講講什麼叫做「事件」。

• 事件

  所謂的「事件」，是指使用者在操作網頁時所做的動作，像是「點擊」按鈕、「滾動」網頁、「送出」表單，這些都是一個個「事件」。

  可以從這裡看到更多關於事件的介紹！

• 事件監聽

  程式碼在監聽到「某個元素被觸發某個動作」後，去執行一些動作，而監聽有兩種方法：

  1. on-event

  $( "元素名稱" ).on( "事件", function() {
    //觸發後要做的動作
  });
  

  2. addEventListener

  var el = document.querySelector("元素名稱");
  el.addEventListener('click',function(e){
    //觸發後要做的動作
  },false)
  

• 事件傳遞：捕獲、目標、冒泡

  這個部分會經過三個階段，也就是小標寫的那三個。

  

  1. 捕獲階段(Capture Phase)：當一個事件發生時，會依序由最外層的 window 開始依序由外向內傳遞事件，一直往目標元素傳遞
  2. 目標階段(Target Phase)：到達事件目標了，會依照註冊順序觸發事件監聽。
  3. 冒泡階段(Bubbling Phase)：最後一步，由事件目標依序向外傳遞，過程中觸發個別元素的冒泡階段事件監聽。

參考來源：

• https://medium.com/schaoss-blog/%E4%BB%80%E9%BA%BC%E6%8D%95%E7%8D%B2%E5%86%92%E6%B3%A1-%E4%BD%A0%E6%98%AF%E9%AD%9A%E5%97%8E-%E8%81%8A%E8%81%8A%E7%80%8F%E8%A6%BD%E5%99%A8-dom-%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%82%B3%E9%81%9E-b44454690661

• https://ithelp.ithome.com.tw/articles/10219793