IT培訓(xùn)網(wǎng)
IT在線(xiàn)學(xué)習(xí)
DOM(文檔對(duì)象模型)結(jié)構(gòu)是一個(gè)樹(shù)型結(jié)構(gòu),當(dāng)一個(gè)HTML元素產(chǎn)生一個(gè)事件時(shí),該事件會(huì)在元素節(jié)點(diǎn)與根結(jié)點(diǎn)之間的路徑傳播,路徑所經(jīng)過(guò)的結(jié)點(diǎn)都會(huì)收到該事件,這個(gè)傳播過(guò)程可稱(chēng)為DOM事件流。
DOM 事件流會(huì)有 3 個(gè)階段:
事件捕獲階段、確定目標(biāo)階段、事件冒泡階段。
事件傳播的順序?qū)?yīng)瀏覽器的兩種事件流模型:捕獲型事件流和冒泡型事件流。
事件捕獲階段:
事件的傳播是從最不特定的事件目標(biāo)到最特定的事件目標(biāo)。即從 DOM 樹(shù)的根到葉子,也就是從document節(jié)點(diǎn)開(kāi)始一層一層向下傳播,直到尋找到觸發(fā)事件的元素。
確定目標(biāo)階段:
通過(guò)捕獲確定具體觸發(fā)事件的元素,之后進(jìn)行處理事件。
事件冒泡階段:
事件的傳播是從最特定的事件目標(biāo)到最不特定的事件目標(biāo)。即從 DOM 樹(shù)的葉子到根,也就是我們從觸發(fā)事件的元素一層一層向外傳遞事件,直到document節(jié)點(diǎn)。
比如在div元素在觸發(fā)click事件時(shí),該事件的捕獲階段最先開(kāi)始,從Document節(jié)點(diǎn)開(kāi)始逐漸向下傳播,直到div元素,事件進(jìn)入目標(biāo)階段處理事件,在目標(biāo)階段結(jié)束之后,事件由div元素開(kāi)始事件的冒泡階段,一層一層向外直到Document節(jié)點(diǎn)為止?偟膩(lái)說(shuō)捕獲階段是從里到外,冒泡階段是從里向外。
在如下代碼中,點(diǎn)擊時(shí)彈出各自的id名稱(chēng)。
- <div id="box1" style="background-color: red;">
- <div id="box2" style="background-color: yellow;">
- <div id="box3" style="background-color: yellowgreen;"></div>
- </div>
- </div>
Js代碼為:
- var oDiv = document.getElementsByTagName('div')
- function fun(){
- alert(this.id);
- }
- oDiv[0].addEventListener('click',fun)
- oDiv[1].addEventListener('click',fun)
- oDiv[2].addEventListener('click',fun)
當(dāng)我們點(diǎn)擊box3時(shí),彈出順序?yàn)閎ox3 、box2、box1。
我們來(lái)分析一下過(guò)程,在點(diǎn)擊事件發(fā)生時(shí),開(kāi)始進(jìn)行事件捕獲,從根節(jié)點(diǎn)document開(kāi)始根據(jù)結(jié)構(gòu)一層一層往里查找,到html元素,到body元素,再到box1元素,再到box2元素,再到box3元素,此時(shí)找到了觸發(fā)事件的元素,捕獲階段結(jié)束。之后進(jìn)入確認(rèn)目標(biāo)階段,開(kāi)始處理事件,彈出box3。處理事件完成后將事件根據(jù)結(jié)構(gòu)依次傳遞給父元素,當(dāng)傳遞到box2元素時(shí),發(fā)現(xiàn)box2有同類(lèi)型的事件,所以觸發(fā)box2的點(diǎn)擊事件彈出box2,再向外傳遞給box1元素,同理box1有同類(lèi)型的事件,彈出box1.
阻止冒泡:
如果你感覺(jué)冒泡機(jī)制影響了你的代碼,就可以進(jìn)行阻止冒泡。
標(biāo)準(zhǔn)瀏覽器:ev.stopPropagation();(ev為事件對(duì)象)
Ie瀏覽器:ev.cancelBubble = true;(ev為事件對(duì)象)
例如在上述代碼中只想讓box3觸發(fā)點(diǎn)擊事件,我們就可以給box3添加事件時(shí)寫(xiě)上
- oDiv[2].onclick = function (ev){
- var ev = window.event || ev;
- ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
更多內(nèi)容
>>本文地址:http://nfbqydst.cn/zhuanye/2021/70629.html
聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
1 您的年齡
2 您的學(xué)歷
3 您更想做哪個(gè)方向的工作?
07月15日Java
咨詢(xún)/試聽(tīng)07月15日Python+人工智能
咨詢(xún)/試聽(tīng)07月15日Web前端
咨詢(xún)/試聽(tīng)07月15日UI設(shè)計(jì)
咨詢(xún)/試聽(tīng)07月15日大數(shù)據(jù)
咨詢(xún)/試聽(tīng)07月15日Java
咨詢(xún)/試聽(tīng)07月15日Python+人工智能
咨詢(xún)/試聽(tīng)07月15日Web前端
咨詢(xún)/試聽(tīng)07月15日UI設(shè)計(jì)
咨詢(xún)/試聽(tīng)07月15日大數(shù)據(jù)
咨詢(xún)/試聽(tīng)