深入理解js Dom事件機(jī)制（一）——事件流

OBKoro1 發(fā)布于2019-08-21 17:34 / 1842人閱讀

摘要：事件捕獲提出的事件流模型稱為事件捕獲。事件代理則是一種簡(jiǎn)單有效的技巧，通過(guò)它可以把事件處理器添加到一個(gè)父級(jí)元素上，從而避免把事件處理器添加到多個(gè)子級(jí)元素上。更新無(wú)需重新綁定事件處理器，因?yàn)槭录韺?duì)不同子元素可采用不同處理方法。

首先我們思考一個(gè)很有意思的事情：一張紙上畫了兩個(gè)同心圓，當(dāng)我們把手指放到圓心上時(shí)，手指指向的不是一個(gè)圓，而是紙上的兩個(gè)圓，同理之，當(dāng)我們單擊網(wǎng)頁(yè)上的一個(gè)div塊的時(shí)候（代碼片段一），單擊事件會(huì)僅僅作用在這個(gè)div上面嗎？ 在瀏覽器發(fā)展到第四代時(shí)，IE和Netscape的開發(fā)團(tuán)隊(duì)都遇到這個(gè)問(wèn)題，他們都一致認(rèn)為，除了單擊div塊，我們也單擊了body、 html、甚至是整個(gè)document，但不幸的是兩個(gè)團(tuán)隊(duì)針對(duì)事件流模型產(chǎn)生了兩個(gè)完全相反的概念。

代碼片段一：




    
    事件流


    Click me

1. 事件冒泡（推薦）

IE的事件流稱為事件冒泡。
   即：事件由最具體的元素接收(div)，逐級(jí)向上傳播到不具體的節(jié)點(diǎn)(document)。

當(dāng)我們點(diǎn)擊代碼片段一中id為box的div塊時(shí)，單擊事件會(huì)按照如下順序傳播：
div ——> body——> html ——> document

如上圖所示，click首先在div元素上發(fā)生，然后沿著Dom樹向上傳播，每一級(jí)節(jié)點(diǎn)都會(huì)發(fā)生直至傳播到document對(duì)象。

測(cè)試代碼




    
    事件流

測(cè)試效果:

note: 幾乎現(xiàn)代所有的瀏覽器都支持事件冒泡，不過(guò)有一些細(xì)微的差別
IE5.5 和 IE5.5 - 版本的事件冒泡會(huì)跳過(guò)html元素（body 直接到 document）
IE9、Firefox、Chrome、Safari則一直冒泡到window對(duì)象。

2、事件捕獲

Netscape提出的事件流模型稱為事件捕獲。
即：事件從最不具體的節(jié)點(diǎn)開始接收（document），傳遞至最具體的節(jié)點(diǎn)
，和IE的冒泡剛好相反， 事件捕獲的本意是當(dāng)事件到達(dá)預(yù)定目標(biāo)前捕獲它。
當(dāng)我們點(diǎn)擊代碼片段一中id為box的div塊時(shí)，單擊事件會(huì)按照如下順序傳播：
document——> html ——> body ——> div

note: 雖然事件捕獲是Netscape唯一支持的事件流模型，但I(xiàn)E9、Firefox、Chrome、Safari目前也都支持這種事件模型，由于老版本的瀏覽器并不支持，所以我們應(yīng)該盡量使用事件冒泡，有特殊需求的時(shí)候再考慮事件捕獲。

3、DOM2級(jí)事件流

為了能夠兼容上述兩種事件模型，又提出了一個(gè)DOM2級(jí)事件模型，它規(guī)定了事件流包含三個(gè)階段：

事件捕獲階段：為事件捕獲提供機(jī)會(huì)；

處于目標(biāo)階段：事件的目標(biāo)接收到事件（但并不會(huì)做出響應(yīng)）；

事件冒泡階段：事件響應(yīng)階段；

在DOM2級(jí)事件流中，但我們點(diǎn)擊代碼片段一中的div，在事件捕獲階段從document ->html ->body就停止了（div元素在這個(gè)階段并不會(huì)接收到點(diǎn)擊事件）。緊接著，事件在div上發(fā)生，并把事件真正的處理看成是冒泡階段的一部分，然后，冒泡階段發(fā)生，事件又回傳到document。

測(cè)試代碼：




    
    DOM2級(jí)事件流

測(cè)試結(jié)果

4、事件流的典型應(yīng)用——事件代理

傳統(tǒng)的事件處理中，需要為每個(gè)元素添加事件處理器。js事件代理則是一種簡(jiǎn)單有效的技巧，通過(guò)它可以把事件處理器添加到一個(gè)父級(jí)元素上，從而避免把事件處理器添加到多個(gè)子級(jí)元素上。
事件代理的原理用到的就是事件冒泡和目標(biāo)元素，把事件處理器添加到父元素，等待子元素事件冒泡，并且父元素能夠通過(guò)target（IE為srcElement）判斷是哪個(gè)子元素，從而做相應(yīng)處理, 下面舉例說(shuō)明：

傳統(tǒng)的事件會(huì)為每個(gè)dom添加事件，代碼如下：





    
    傳統(tǒng)的事件綁定



    
        red
        orange
        yellow
        green
        blue
        indigo
        purple

事件代理的處理方式如下：





    
    傳統(tǒng)的事件綁定



    
        red
        orange
        yellow
        green
        blue
        indigo
        purple

使用事件代理的好處：

將多個(gè)事件處理器減少到一個(gè)，因?yàn)槭录幚砥饕v留內(nèi)存，這樣就提高了性能。想象如果有一個(gè)100行的表格，對(duì)比傳統(tǒng)的為每個(gè)單元格綁定事件處理器的方式和事件代理（即table上添加一個(gè)事件處理器），不難得出結(jié)論，事件代理確實(shí)避免了一些潛在的風(fēng)險(xiǎn)，提高了性能。

DOM更新無(wú)需重新綁定事件處理器，因?yàn)槭录韺?duì)不同子元素可采用不同處理方法。如果新增其他子元素（a,span,div等），直接修改事件代理的事件處理函數(shù)即可，不需要重新綁定處理器，不需要再次循環(huán)遍歷。