資訊專欄INFORMATION COLUMN
摘要：事件捕獲事件冒泡事件委托，這三個相似又不盡相同的術(shù)語把我搞懵了很長一段時間，今天專門抽時間挨個看了一遍。級規(guī)范瀏覽器自身的事件規(guī)范要求事件應(yīng)該從對象開始向下傳播，找到具體的目標(biāo)前，整個過程都是捕獲階段。
事件捕獲、事件冒泡、事件委托，這三個相似又不盡相同的術(shù)語把我搞懵了很長一段時間，今天專門抽時間挨個看了一遍。
首先，是那個聞名遐邇的圖
事件捕獲和事件冒泡是事件流機(jī)制層面的東西，不以代碼的意志為轉(zhuǎn)移。
DOM2級規(guī)范（瀏覽器自身的事件規(guī)范）要求事件應(yīng)該從document對象開始向下傳播，找到具體的目標(biāo)前，整個過程都是捕獲階段。
找到具體的目標(biāo)后，開始向外層冒泡，直到回到document對象結(jié)束，這個過程叫冒泡階段。
但規(guī)范只是規(guī)范，較舊的瀏覽器都是從window對象開始捕獲事件的，建議放心地使用事件冒泡，特殊情況下再考慮事件捕獲。
接下來是事件委托，這個才是重點(diǎn)！
JS和HTML之間是靠事件來實現(xiàn)交互的，如果有多個div需要綁定click事件監(jiān)聽，無論是DOM0級和DOM2級，添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體性能。
首先，每個函數(shù)都是對象，都會占內(nèi)存。內(nèi)存中的對象越多，性能就越差。
其次，必須事先指定所有事件處理程序而導(dǎo)致的DOM訪問次數(shù)，會延遲整個頁面的交互就緒時間。也就是說在多個節(jié)點(diǎn)上掛載事件，會影響DOM的加載。
事件委托就是解決性能問題的，你可以把它看做是一種解決方案或設(shè)計模式。
事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。
少廢話，上代碼（以下例子來自《Javascript高級程序設(shè)計》，略刪改）
// 面對這樣一段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)
使用事件委托，對于用戶來說最終的結(jié)果相同，但我們其實只取了一個DOM元素，只添加了一個事件處理程序，但這種實現(xiàn)方案所需要占用的內(nèi)存更少。
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對象添加一個事件處理程序，優(yōu)點(diǎn)如下：
document對象在DOM樹渲染的初期就已經(jīng)準(zhǔn)備完畢，無需等待DOMContentLoaded或load事件，而且document對象不像其他DOM節(jié)點(diǎn)那樣會被移除。換句話說，只要目標(biāo)元素呈現(xiàn)在頁面上，就已經(jīng)具備了事件處理程序。
由于只引用一個DOM對象用來添加事件處理程序，在頁面中設(shè)置事件處理程序所需的時間更少。
整個頁面占用的內(nèi)存更少，提升整體性能。
關(guān)于上面三點(diǎn)的最后一點(diǎn)，解釋一下：如果我們沒有使用事件委托，那在具體元素比如某div上添加的監(jiān)聽，在該div被移除出DOM樹后，綁在它身上的事件處理程序可能無法被垃圾回收，造成浪費(fèi)。
每當(dāng)將事件處理程序指定給元素時，運(yùn)行中的瀏覽器代碼與支持頁面交互的JS代碼之間會建立一個連接，這種連接越多，頁面執(zhí)行效率越低，利用事件委托可以盡可能減少這種連接數(shù)量。呃……雖然可能也沒法成功垃圾回收，但整體性能還是更高的。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84452.html
摘要：等等，挺在這里，雖然不僅一篇文章闡述了事件委托是利用了冒泡機(jī)制，得益于冒泡機(jī)制，但是，怎么得益的，怎么利用的。事件委托和冒泡機(jī)制有關(guān)系嗎接下來我想引出本文的重點(diǎn)事件委托和冒泡機(jī)制有關(guān)系嗎我認(rèn)為就算有關(guān)系，關(guān)系也不大。 面試官提出的問題 我們在面試前端的過程中，經(jīng)常會聽到面試官問這樣的問題： 如果我有一個頁面，里面1000個元素都要綁定click事件，請問你要怎么做 如果你...
摘要：為什么要弄清楚事件捕獲和冒泡以及事件委托一面試必問的問題二在過去糟糕的日子里，瀏覽器的兼容性比現(xiàn)在要小得多，網(wǎng)景只使用事件捕獲，而只使用事件冒泡。 為什么要弄清楚事件捕獲和冒泡以及事件委托 一、面試必問的問題二、在過去糟糕的日子里，瀏覽器的兼容性比現(xiàn)在要小得多，Netscape（網(wǎng)景）只使用事件捕獲，而Internet Explorer只使用事件冒泡。當(dāng)W3C決定嘗試規(guī)范這些行為并達(dá)成...
摘要：為什么要弄清楚事件捕獲和冒泡以及事件委托一面試必問的問題二在過去糟糕的日子里，瀏覽器的兼容性比現(xiàn)在要小得多，網(wǎng)景只使用事件捕獲，而只使用事件冒泡。 為什么要弄清楚事件捕獲和冒泡以及事件委托 一、面試必問的問題二、在過去糟糕的日子里，瀏覽器的兼容性比現(xiàn)在要小得多，Netscape（網(wǎng)景）只使用事件捕獲，而Internet Explorer只使用事件冒泡。當(dāng)W3C決定嘗試規(guī)范這些行為并達(dá)成...
摘要：事件階段事件分為三個階段事件捕獲事件目標(biāo)事件冒泡事件捕獲和冒泡事件捕獲事件發(fā)生時首先發(fā)生在上，然后依次傳遞給最后到達(dá)目的節(jié)點(diǎn)即事件目標(biāo)。 事件階段 事件分為三個階段： 事件捕獲 --> 事件目標(biāo) --> 事件冒泡 事件捕獲和冒泡 事件捕獲：事件發(fā)生時（onclick,onmouseover……）首先發(fā)生在document上，然后依次傳遞給body、……最后到達(dá)目的節(jié)點(diǎn)（即事件...
閱讀 3874·2021-10-08 10:12
閱讀 4441·2021-09-02 15:40
閱讀 964·2021-09-01 11:09
閱讀 1616·2021-08-31 09:38
閱讀 2551·2019-08-30 13:54
閱讀 2259·2019-08-30 12:54
閱讀 1253·2019-08-30 11:18
閱讀 1411·2019-08-29 14:06
