iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
自我挑戰組

登堂入室!前端工程師的觀念技術 _30_ 題系列 第 15

14. 解釋 Event bubbling & Event delegation

Event Bubbling


定義

Event bubbling跟操作DOM元素的事件有關,是指當子元素(child)和父元素(parent)在監聽相同類型的事件(event)時,事件的執行會往該元素的父層傳遞。

描述依然很抽象,所以要繼續看例子:

示例

codepen範例程式碼

// HTML
<div class="parent">
  <div class="child"></div>
</div>
// javaScript
const parent = document.querySelector(".parent");
const child = document.querySelector(".child");

parent.addEventListener("click", () => {
  console.log(`parent event`);
});

child.addEventListener("click", () => {
  console.log("child event");
});

範例的結構,是由一個父元素的<div>包裹一個子元素<div>
而父元素和子元素都加上"click event"的監聽器。

在點擊父元素的區塊時,console會輸出"parent event"

// output:
"child event"

然而,在點擊子元素的區塊時,console會依序輸出"parent event"

// output:
"child event"
"parent event"

也就是說,如果子元素和父元素被綁上了一樣的監聽事件("click")

瀏覽器在執行完子元素的事件後,會繼續向上執行父元素的事件。

(可以想像事件發生的順序會像泡泡一樣上浮,表示事件向上傳遞。)

如果想要避免這樣的情形,可以使用 event.stopPropagation()方法:

const parent = document.querySelector(".parent");
const child = document.querySelector(".child");

parent.addEventListener("click", () => {
  console.log(`parent event`);
});

child.addEventListener("click", (e) => {
  console.log("child event");
  e.stopPropagation();
});

範例在子元素裡加入event.stopPropagation(),這樣在點擊子元素時,就不會再繼續觸發父元素的事件,也就可以防止Event Bubbling的行為發生。

Event Delegation


delegation有委派的意思,所以直譯是指事件委派。
而Event delegation是一種利用Event bubbling的性質,去委派事件的一種方式。

但是,是誰要把事件委派給誰呢?這就是接下來要看的例子:
codepen範例程式碼

// HTML
<div class="parent">
  <div class="child child1"></div>
  <div class="child child2"></div>
  <div class="child child3"></div>
</div>
// javaScript
const parent = document.querySelector(".parent");

parent.addEventListener("click", () => {
  console.log("We did the same event!");
});

這次的結構讓外層的<div>包了三個區塊!

而在這段程式碼裡,不管點擊的是父元素或子元素的<div>
他們都會執行一樣的結果:

// output:
"We did the same event!"

也就是說,
→假設我們今天要指派一樣的事件給很多元素,可以利用Event bubbling會傳遞事件的性質用一個父元素將所有的元素包起來,將事件委派給父元素,就可以讓所有的child都執行相同的工作!

【如內文有誤還請不吝告知>< 謝謝閱覽至此的各位:D】

參考資料:
Introduction to events - Learn web development | MDN
[教學] 瀏覽器事件:Event Bubbling, Event Capturing 及 Event Delegation | Shubo 的程式教學筆記

-----正文結束-----


上一篇
13. 關於 IIFE 的 4 題練習
下一篇
15. HTTP request methods ( 上 )--- GET vs. POST
系列文
登堂入室!前端工程師的觀念技術 _30_ 題31

尚未有邦友留言

立即登入留言