2023-01-17|閱讀時間 ‧ 約 15 分鐘

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

在搞清楚事件委託前必須先了解什麼是事件傳遞機制(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 前端鬼打牆

追蹤

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

贊助作者

從 Google News 追蹤更多 vocus 的最新精選內容

發表回應

成為會員後即可發表留言