首頁技術文章正文

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

更新時間:2023年06月15日17時48分來源:傳智教育瀏覽次數(shù):

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

DOM 事件流分為3個階段：

1. 捕獲階段

2. 當前目標階段

3. 冒泡階段

DOM事件流

事件冒泡： IE 最早提出，事件開始時由最具體的元素接收，然后逐級向上傳播到到 DOM 最頂層節(jié)點的過程。

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

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

事件冒泡

事件發(fā)生時會在元素節(jié)點之間按照特定的順序傳播，這個傳播過程即 DOM 事件流。

注意

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

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

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

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

有些事件是沒有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

事件冒泡有時候會帶來麻煩，有時候又會幫助很巧妙的做某些事件，我們后面講解。

最新資訊