iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 29
1
Modern Web

實作經典 JavaScript 30系列 第 29

Day29: Event Capture, Propagation, Bubbling and Once

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


上一篇
Day28: Sticky Nav
下一篇
Day30: 完賽心得
系列文
實作經典 JavaScript 3030

尚未有邦友留言

立即登入留言