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

事件

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

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

事件監聽

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

  1. on-event
$('元素名稱').on('事件', function () {
  //觸發後要做的動作
})
  1. addEventListener
var el = document.querySelector('元素名稱')
el.addEventListener(
  'click',
  function (e) {
    //觸發後要做的動作
  },
  false
)

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

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

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

參考來源：