事件的捕獲、冒泡和委托

Integ 發布于2019-08-20 18:24 / 3368人閱讀

摘要：事件捕獲事件冒泡事件委托，這三個相似又不盡相同的術語把我搞懵了很長一段時間，今天專門抽時間挨個看了一遍。級規范瀏覽器自身的事件規范要求事件應該從對象開始向下傳播，找到具體的目標前，整個過程都是捕獲階段。

事件捕獲、事件冒泡、事件委托，這三個相似又不盡相同的術語把我搞懵了很長一段時間，今天專門抽時間挨個看了一遍。

首先，是那個聞名遐邇的圖

事件捕獲和事件冒泡是事件流機制層面的東西，不以代碼的意志為轉移。

DOM2級規范（瀏覽器自身的事件規范）要求事件應該從document對象開始向下傳播，找到具體的目標前，整個過程都是捕獲階段。

找到具體的目標后，開始向外層冒泡，直到回到document對象結束，這個過程叫冒泡階段。

但規范只是規范，較舊的瀏覽器都是從window對象開始捕獲事件的，建議放心地使用事件冒泡，特殊情況下再考慮事件捕獲。

接下來是事件委托，這個才是重點！

JS和HTML之間是靠事件來實現交互的，如果有多個div需要綁定click事件監聽，無論是DOM0級和DOM2級，添加到頁面上的事件處理程序數量將直接關系到頁面的整體性能。

首先，每個函數都是對象，都會占內存。內存中的對象越多，性能就越差。

其次，必須事先指定所有事件處理程序而導致的DOM訪問次數，會延遲整個頁面的交互就緒時間。也就是說在多個節點上掛載事件，會影響DOM的加載。

事件委托就是解決性能問題的，你可以把它看做是一種解決方案或設計模式。

事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。

少廢話，上代碼（以下例子來自《Javascript高級程序設計》，略刪改）

// 面對這樣一段HTML

不使用事件委托的笨辦法：

var item1 = document.getElementById("goSomewhere")
var item2 = document.getElementById("doSomething")
var item3 = document.getElementById("sayHi")

item1.addEventListener("click", function(e) {
}, false)
item2.addEventListener("click", function(e) {
}, false)
item3.addEventListener("click", function(e) {
}, false)

使用事件委托，對于用戶來說最終的結果相同，但我們其實只取了一個DOM元素，只添加了一個事件處理程序，但這種實現方案所需要占用的內存更少。

var list = document.getElementById("myLinks")

list.addEventListener("click", function(e) {
    var target = e.target;
    switch(target.id) {
        case "goSomewhere":
            // TODO
            break;
        case "doSomething":
            // TODO
            break;
        case "sayHi":
            // TODO
            break;
    }
}, false)

如果可行的話，可以考慮為document對象添加一個事件處理程序，優點如下：

document對象在DOM樹渲染的初期就已經準備完畢，無需等待DOMContentLoaded或load事件，而且document對象不像其他DOM節點那樣會被移除。換句話說，只要目標元素呈現在頁面上，就已經具備了事件處理程序。

由于只引用一個DOM對象用來添加事件處理程序，在頁面中設置事件處理程序所需的時間更少。

整個頁面占用的內存更少，提升整體性能。

關于上面三點的最后一點，解釋一下：如果我們沒有使用事件委托，那在具體元素比如某div上添加的監聽，在該div被移除出DOM樹后，綁在它身上的事件處理程序可能無法被垃圾回收，造成浪費。

每當將事件處理程序指定給元素時，運行中的瀏覽器代碼與支持頁面交互的JS代碼之間會建立一個連接，這種連接越多，頁面執行效率越低，利用事件委托可以盡可能減少這種連接數量。呃……雖然可能也沒法成功垃圾回收，但整體性能還是更高的。

云服務器 GPU云服務器委托事件事件委托冒泡事件事件冒泡

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84452.html

事件委托和冒泡機制有關系嗎？

摘要：等等，挺在這里，雖然不僅一篇文章闡述了事件委托是利用了冒泡機制，得益于冒泡機制，但是，怎么得益的，怎么利用的。事件委托和冒泡機制有關系嗎接下來我想引出本文的重點事件委托和冒泡機制有關系嗎我認為就算有關系，關系也不大。面試官提出的問題我們在面試前端的過程中，經常會聽到面試官問這樣的問題：如果我有一個頁面，里面1000個元素都要綁定click事件，請問你要怎么做如果你...

joywek 2019-08-26 14:07 評論0 收藏0
事件捕獲和冒泡以及事件委托的原理和區別

摘要：為什么要弄清楚事件捕獲和冒泡以及事件委托一面試必問的問題二在過去糟糕的日子里，瀏覽器的兼容性比現在要小得多，網景只使用事件捕獲，而只使用事件冒泡。為什么要弄清楚事件捕獲和冒泡以及事件委托一、面試必問的問題二、在過去糟糕的日子里，瀏覽器的兼容性比現在要小得多，Netscape（網景）只使用事件捕獲，而Internet Explorer只使用事件冒泡。當W3C決定嘗試規范這些行為并達成...

archieyang 2019-08-26 11:46 評論0 收藏0
事件捕獲和冒泡以及事件委托的原理和區別

摘要：為什么要弄清楚事件捕獲和冒泡以及事件委托一面試必問的問題二在過去糟糕的日子里，瀏覽器的兼容性比現在要小得多，網景只使用事件捕獲，而只使用事件冒泡。為什么要弄清楚事件捕獲和冒泡以及事件委托一、面試必問的問題二、在過去糟糕的日子里，瀏覽器的兼容性比現在要小得多，Netscape（網景）只使用事件捕獲，而Internet Explorer只使用事件冒泡。當W3C決定嘗試規范這些行為并達成...

tyheist 2019-08-01 18:37 評論0 收藏0
JS中的事件綁定，事件捕獲，事件冒泡以及事件委托，兼容IE

摘要：事件階段事件分為三個階段事件捕獲事件目標事件冒泡事件捕獲和冒泡事件捕獲事件發生時首先發生在上，然后依次傳遞給最后到達目的節點即事件目標。事件階段事件分為三個階段：事件捕獲 --> 事件目標 --> 事件冒泡事件捕獲和冒泡事件捕獲：事件發生時（onclick,onmouseover……）首先發生在document上，然后依次傳遞給body、……最后到達目的節點（即事件...

taowen 2019-08-19 17:39 評論0 收藏0