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