教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

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

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

好口碑IT培訓(xùn)

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

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

1. 捕獲階段

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

3. 冒泡階段

DOM事件流

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

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

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

事件冒泡

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

注意

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

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

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

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

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

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


0 分享到:
和我們?cè)诰€交談!