JavaScript 面試考題：事件委託是什麼

2023/01/17閱讀時間約 16 分鐘

在搞清楚事件委託前必須先了解什麼是事件傳遞機制(Event Propagation)，也就是捕獲(capture)跟冒泡(bubble)，聽起來好像很難但是我昨天看完彭彭的直播課程(17:00開始)後就懂了！我寫成文章幫助記憶，也希望能幫助到大家，然後希望我面試會被考到。

Medium好讀版：JavaScript 面試考題：事件委託是什麼

事件傳遞機制 Event Propagation

事件傳遞機制就是指DOM的事件傳遞，JS中有規定事件會怎麼傳遞。
假設現在有個DOM長成這樣：

<body>
    <div id="layout">
        <button id="btn">click</button>
    </div>
</body>

當我們在畫面中點選<button>時，其實也會同時點到外面的<div>還有<body>，現在加上JS，分別為<button>, <div>, <body>掛上事件：

let div = document.querySelector("#layout");
let btn = document.querySelector("#btn");

document.body.addEventListener(
    "click",
    function () {
        console.log("Body clicked");
    }
);
div.addEventListener(
    "click",
    function () {
        console.log("div clicked");
    }
);
btn.addEventListener(
    "click",
    function () {
        console.log("btn clicked");
    }
);

這時候我們點選了<button>，那他會依照什麼順序印出來呢？

//btn clicked
//div clicked
//Body clicked

他會從內部的<button>開始，接著是<div>，最後是最外層的<body>。
這種由內而外的事件傳遞就是冒泡(bubble)；如果是由外而內的話就是捕獲(capture)。

為什麼是冒泡？

因為addEventListener()這個函數其實有三個參數：

addEventListener('事件名稱', 處理函式, 捕獲(true)/冒泡(false))

'事件名稱'：例如"click", "scroll”等事件
處理函式：就是經過上面的事件後，要執行什麼function
第三個參數(true/false)：第三個參數是布林值，true的話就是捕獲，false的話就是冒泡。

剛剛的範例中，我們並沒有填入第三個參數，因此預設就是false冒泡事件，所以剛剛的範例才會是由內而外的傳遞。

如果想改成由外而內的傳遞，那就將函式的第三個參數填上false：

document.body.addEventListener(
    "click",
    function () {
        console.log("Body clicked Capture");
    },
    true
);
div.addEventListener(
    "click",
    function () {
        console.log("div clicked Capture");
    },
    true
);
btn.addEventListener(
    "click",
    function () {
        console.log("btn clicked Capture");
    },
    true
);

那印出來的結果就會是由外而內的捕獲(capture)：

//Body clicked Capture
//div clicked Capture
//btn clicked Capture

先捕獲後冒泡

如果把剛剛的範例都寫在一起的話：

let div = document.querySelector("#layout");
let btn = document.querySelector("#btn");

//預設的冒泡(bubble)

document.body.addEventListener(
    "click",
    function () {
        console.log("Body clicked bubble");
    }
);
div.addEventListener(
    "click",
    function () {
        console.log("div clicked bubble");
    }
);
btn.addEventListener(
    "click",
    function () {
        console.log("btn clicked bubble");
    }
);

//捕獲Capture

document.body.addEventListener(
    "click",
    function () {
        console.log("Body clicked Capture");
    },
    true
);
div.addEventListener(
    "click",
    function () {
        console.log("div clicked Capture");
    },
    true
);
btn.addEventListener(
    "click",
    function () {
        console.log("btn clicked Capture");
    },
    true
);

那印出來的結果就會是：

//Body clicked Capture
//div clicked Capture
//btn clicked Capture
//btn clicked bubble
//div clicked bubble
//Body clicked bubble

由外而內的捕獲(Body->div->button)接著再由內而外的冒泡(button->div->body)。

給我取消傳遞事件喔

如果我們想要讓程式取消傳遞事件，例如我希望他捕獲到div(body->div->stop)就停止，這時候只需要加上stopPropagation()

let div = document.querySelector("#layout");
let btn = document.querySelector("#btn");

//預設的冒泡(bubble)

document.body.addEventListener(
    "click",
    function () {
        console.log("Body clicked bubble");
    }
);
div.addEventListener(
    "click",
    function () {
        console.log("div clicked bubble");
    }
);
btn.addEventListener(
    "click",
    function () {
        console.log("btn clicked bubble");
    }
);

//捕獲Capture

document.body.addEventListener(
    "click",
    function () {
        console.log("Body clicked Capture");
    },
    true
);
div.addEventListener(
    "click",
    function (e) {
        console.log("div clicked Capture");

        //  在這裡加上stopPropagation()
        e.stopPropagation()
    },
    true
);
btn.addEventListener(
    "click",
    function () {
        console.log("btn clicked Capture");
    },
    true
);

function中的參數e：addEventListener()會自動幫忙建立一個事件物件，裡面有該事件的屬性，我們把這個事件物件用參數形式把它抓出來使用。

stopPropagation()加在哪裡就會阻止它繼續往下傳遞，不過這個stopPropagation()並不能阻止同層級的監聽器，例如我們在div上增加兩個addEventListener()：

div.addEventListener(
    "click",
    function (e) {
        console.log("div clicked Capture");
        e.stopPropagation()
    },
    true
);

div.addEventListener(
    "click",
    function () {
        console.log("div clicked Capture2");
    },
    true
);

印出來會是：

//Body clicked Capture
//div clicked Capture
//div clicked Capture2

同一層級的監聽器還是會被執行到。
這時候要改用e.stopImmediatePropagation()

div.addEventListener(
    "click",
    function (e) {
        console.log("div clicked Capture");
        e.stopImmediatePropagation()
    },
    true
);

div.addEventListener(
    "click",
    function () {
        console.log("div clicked Capture2");
    },
    true
);

那就只會印出第一個console，同層級的監聽器也會被阻止。

//Body clicked Capture
//div clicked Capture

取消預設事件

有時候如果我們要取消瀏覽器的預設，例如阻止a標籤跳轉到別的分頁，那就會用到preventDefault()

<a id="link" href="https://dramanoteblog.com/">Drama Note</a>
let link = document.querySelector("#link");
link.addEventListener("click", function (e) {
    e.preventDefault()
    console.log("Go to link");
});

加了preventDefault()雖然不會跳轉到該頁面，但是下一個console.log還是會執行，簡單來說preventDefault()只是取消這個DOM元素的預設行為，並不影響事件傳遞，該捕獲該冒泡的都還是會捕獲冒泡。

事件委託 Event Delegation

因為有捕獲跟冒泡事件，於是我們可以執行事件委託。

如果我們有一堆處理類似事件的DOM元素，那我們可以把事件掛在他們的共同父層上，運用e.target還有html的data-自訂屬性，可以快速了解我們是針對哪個DOM元素進行事件處理。

優點：不需要為每一個button寫上程式碼，只須建立一個事件函數並且加入標記即可。

不用一直寫類似的code惹

今天有一段DOM長這樣：

<div id="menu">
        <button data-key="add">新增</button>
        <button data-key="update">修改</button>
        <button data-key="remove">刪除</button>
 </div>

我不想在每個<button>上寫重複的click事件了拉！

解決方法：把事件掛在外層的<div>上吧

let menu = document.querySelector("#menu");
menu.addEventListener("click",function(e){
    let key = e.target.getAttribute("data-key")
    console.log(key)
})

e.target可以抓到我們點擊的DOM元素，例如我們點到新增這個按鈕，就會得到<button data-key=”add”>新增</button>這一串。

getAttribute()用來抓取DOM元素中的屬性值，那我們要抓的是自訂屬性data-key的屬性值，所以點選新增這個按鈕，就能夠get到add。

這樣就能夠區分每個按鈕，也不用重複撰寫同樣的點擊事件程式碼。

第一次用方格子寫技術文章，發現方格子的code區塊還得再加油才行，medium已經支援不同程式語言的code區塊了

參考資料：
彭彭的課程：https://www.youtube.com/watch?v=3cTdztTmtL0
huli部落格：https://blog.techbridge.cc/2017/07/15/javascript-event-propagation/
重新認識 JavaScript(Kuro)：https://ithelp.ithome.com.tw/articles/10192015
JavaScript DOM HTML 屬性 (HTML Attributes)：https://www.fooish.com/javascript/dom/html-attributes.html

溫蒂蒂蒂的沙龍Wendy Loops 前端鬼打牆

溫蒂蒂蒂的沙龍

2會員

2內容數

前端筆記希望不要再鬼打牆

留言0

查看全部

發表第一個留言支持創作者！

你可能也想看

Google News 追蹤

方格子 vocus 官方沙龍

2024/10/21

「天天秋嗨嗨」：vocus 秋季徵文，五大主題 & 獎品登場！

這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～

#天天秋嗨嗨 #秋季旅遊 #秋季穿搭

MimiVsJames的美股投資分享

2024/11/03

美國大選『終局之戰』（Endgame）即將展開，美股將迎來新世紀？（上篇：模型推導寶座花落誰家？）

美國總統大選只剩下三天，我們觀察一整週民調與金融市場的變化（包含賭局），到本週五下午3:00前為止，誰是美國總統幾乎大概可以猜到60-70%的機率，本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變

#美股 #美國大選 #投資理財

矮袋鼠律師的沙龍

2024/11/03

如果這個世界有神，那祂一定姓李名相赫｜矮袋鼠律師

Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位王多多的點評「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...

#Faker #電競 #運動

Michael楊

2024/06/04

Javascript入門-Day10：套件

套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。

#Javascript

Michael楊

2024/06/03

Javascript入門-Day9：例外處理

當你在開發程式時，難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性，我們使用「例外處理」來處理這些異常情況。

#Javascript

小黑與程式的邂逅

2024/05/31

[Java Script][Vue.js]充值頁面

#JavaScript #Vue #axios

阿榮 | 前端 ~ 互動藝術程式

2024/04/12

型別 - 面試核心 | JavaScript

針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討

#面試 #JavaScript #程式

Vivian Yeh - 跨領域轉職的軟體工程師

2023/08/03

【前端開發】如何使用 JavaScript 進行頁面的轉址？

在前端開發中，很常會有需要轉址的需求，且處理的手法滿因人而異的，所以今天就想要來整理一些常見的 JavaScript 頁面轉址方式，以及各自的差異。

#前端開發 #JavaScript

SUPOAN的沙龍

2022/10/29

[JavaScript] 究竟什麼是Event loop?

執行以上程式碼，然後看到了這個結果：為什麼「延遲0秒」的函式寫在上方，但在console印出的結果，它還是被排在第二順位？利用AC教材提供的youtube演講連結一窺究竟：演講提供了更多JS的細節概念，身為JS新手的我還在消化，但若針對教案提出的問題來回答，加上利用google大神查到MDN的

#javascript #computerscience #coding

Blockcyber的沙龍

2022/08/16

Javascript : Event Queue & Event Loop

前言這是第一次寫技術文章，但其實應該也只能說是蒐集很多資料並學習如何透過自己的話解釋的內容，並不能像其他大神可能分享一些很酷的技術，目標就單純是為了完成最後一週的作業(如下)。走入非同步之前執行環境(Execution Context) 執行環境堆疊 (Execution stack)

#ALPHACamp #自學 #更認識Javascript

Vivian Yeh - 跨領域轉職的軟體工程師

2022/01/15

【JavaScript 簡史】什麼是 ES5、ES6？網頁開發與 ECMAScript 的小故事

在一開始學習前端開發的時候，一直遇到講師在課程內容中提到 ES5、ES6 等關鍵字，當初的我，單純認為 ES5、ES6 是講述 JavaScript 的版本，所以在使用上就沒有想太多，反正就是 JavaScript 1.0 、2.0 的感覺吧？

#JavaScript

Vic Lin的沙龍

2021/09/13

JavaScript async/await

上篇介紹的promise chain的寫法，是已經比原本好維護了沒錯，但是可讀性似乎還是有點不足，其實還可以改成用async/await的寫法，如下: E 其中，async是非同步的意思，等於是把getData()這個function定義為非同步，因此從console可以看到，test是最先被pri

#JavaScript #async #await