事件流是什么？怎樣理解事件流和事件冒泡

事件流描述的是從頁(yè)面中接收事件的順序。事件發(fā)生時(shí)會(huì)在元素節(jié)點(diǎn)之間按照特定的順序傳播，這個(gè)傳播過(guò)程即 DOM 事件流。比如我們給一個(gè)div 注冊(cè)了點(diǎn)擊事件：

DOM 事件流分為3個(gè)階段：

1. 捕獲階段

2. 當(dāng)前目標(biāo)階段

3. 冒泡階段

事件冒泡： IE 最早提出，事件開(kāi)始時(shí)由最具體的元素接收，然后逐級(jí)向上傳播到到 DOM 最頂層節(jié)點(diǎn)的過(guò)程。

事件捕獲： 網(wǎng)景最早提出，由 DOM 最頂層節(jié)點(diǎn)開(kāi)始，然后逐級(jí)向下傳播到到最具體的元素接收的過(guò)程。

向水里面扔一塊石頭，石頭下降的過(guò)程就可以理解為事件冒泡，為從最頂層向事件發(fā)生的最具體元素(目標(biāo)點(diǎn))的捕獲過(guò)程;之后會(huì)產(chǎn)生泡泡，會(huì)在最低點(diǎn)( 最具體元素)之后漂浮到水面上，整個(gè)過(guò)程相當(dāng)于事件冒泡。

事件發(fā)生時(shí)會(huì)在元素節(jié)點(diǎn)之間按照特定的順序傳播，這個(gè)傳播過(guò)程即 DOM 事件流。

注意

JS 代碼中只能執(zhí)行捕獲或者冒泡其中的一個(gè)階段。

onclick 和 attachEvent 只能得到冒泡階段。

addEventListener(type, listener[, useCapture])第三個(gè)參數(shù)如果是 true，表示在事件捕獲階段調(diào)用事件處理程序;如果是 false(不寫(xiě)默認(rèn)就是false)，表示在事件冒泡階段調(diào)用事件處理程序。

實(shí)際開(kāi)發(fā)中我們很少使用事件捕獲，我們更關(guān)注事件冒泡。

有些事件是沒(méi)有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

事件冒泡有時(shí)候會(huì)帶來(lái)麻煩，有時(shí)候又會(huì)幫助很巧妙的做某些事件，我們后面講解。