WES BOS系列影片
Alex快速導讀系列影片

今天比較偏觀念的講解
主要是希望能較深入理解addEventListener()
學習DOM的事件機制，包括事件捕獲(Capture)、事件冒泡(Bubbling)、單次觸發(Once)...等等
作者製作了三層疊再一起的div，來協助我們理解事件機制

1.首先，先抓出全部的div

const divs = document.querySelectorAll('div');

2.個別對div，設置監聽器

divs.forEach(div => 
  div.addEventListener('click', logText, { capture: false, once: false }));

function logText(e) {
  console.log(this.className);
}

我們知道
addEventListener()的
第一區塊為:事件類型(EventType)
第二區塊為:回呼函式(callback Function)
第三區塊為:設定(option)，是比較少碰到的部分，能夠對於監聽器做一些設定

針對設定，我們可以來做一些實驗
option初始設定

{ capture: false, once: false }

capture: false => 事件冒泡(Bubbling)
once: false => 可不只觸發一次

在這個狀態下點擊最小的橘色區域，事件為冒泡機制，console.log出來的className
依序為 three -> two -> one

若option更改為

{ capture: true, once: false }

在這個狀態下點擊最小的橘色區域，事件為捕獲機制，console.log出來的className
依序為 one -> two -> three

若option更改為

{ capture: true, once: true }

在這個狀態下點擊最小的橘色區域，事件為捕獲機制，console.log出來的className
依序為 one -> two -> three，且事件只能觸發單次

而若要阻擋事件的傳播，則要加上
e.stopPropagation()

function logText(e) {
  e.stopPropagation()
  console.log(this.className);
}

在capture: true 的狀態下，點擊不同顏色區塊，console.log出來的className
只會有 one 。

而在 capture: false 的狀態下，點擊不同顏色區塊，console.log出來的className
則是依照不同區塊而顯示不同的className。
橘色:three
粉色:two
紫色:one
事件不再向外傳遞

今天的練習完成囉，完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30