400-650-7353
您所在的位置:首頁(yè) > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎知識】DOM事件流

【W(wǎng)eb前端基礎知識】DOM事件流

  • 發(fā)布: 優(yōu)就業(yè)it培訓
  • 來(lái)源:
  • 2021-10-29 15:47:07
  • 閱讀()
  • 分享
  • 手機端入口

DOM(文檔對象模型)結構是一個(gè)樹(shù)型結構,當一個(gè)HTML元素產(chǎn)生一個(gè)事件時(shí),該事件會(huì )在元素節點(diǎn)與根結點(diǎn)之間的路徑傳播,路徑所經(jīng)過(guò)的結點(diǎn)都會(huì )收到該事件,這個(gè)傳播過(guò)程可稱(chēng)為DOM事件流。

DOM 事件流會(huì )有 3 個(gè)階段:

事件捕獲階段、確定目標階段、事件冒泡階段。

事件傳播的順序對應瀏覽器的兩種事件流模型:捕獲型事件流和冒泡型事件流。

事件捕獲階段:

事件的傳播是從最不特定的事件目標到最特定的事件目標。即從 DOM 樹(shù)的根到葉子,也就是從document節點(diǎn)開(kāi)始一層一層向下傳播,直到尋找到觸發(fā)事件的元素。

確定目標階段:

通過(guò)捕獲確定具體觸發(fā)事件的元素,之后進(jìn)行處理事件。

事件冒泡階段:

事件的傳播是從最特定的事件目標到最不特定的事件目標。即從 DOM 樹(shù)的葉子到根,也就是我們從觸發(fā)事件的元素一層一層向外傳遞事件,直到document節點(diǎn)。

比如在div元素在觸發(fā)click事件時(shí),該事件的捕獲階段最先開(kāi)始,從Document節點(diǎn)開(kāi)始逐漸向下傳播,直到div元素,事件進(jìn)入目標階段處理事件,在目標階段結束之后,事件由div元素開(kāi)始事件的冒泡階段,一層一層向外直到Document節點(diǎn)為止?偟膩(lái)說(shuō)捕獲階段是從里到外,冒泡階段是從里向外。

在如下代碼中,點(diǎn)擊時(shí)彈出各自的id名稱(chēng)。

  1. <div id="box1" style="background-color: red;"
  2.     <div id="box2" style="background-color: yellow;"
  3.         <div id="box3" style="background-color: yellowgreen;"></div> 
  4.     </div> 
  5. </div> 

Js代碼為:

  1. var oDiv = document.getElementsByTagName('div'
  2. function fun(){ 
  3.     alert(this.id); 
  4. oDiv[0].addEventListener('click',fun) 
  5. oDiv[1].addEventListener('click',fun) 
  6. oDiv[2].addEventListener('click',fun) 

當我們點(diǎn)擊box3時(shí),彈出順序為box3 、box2、box1。

我們來(lái)分析一下過(guò)程,在點(diǎn)擊事件發(fā)生時(shí),開(kāi)始進(jìn)行事件捕獲,從根節點(diǎn)document開(kāi)始根據結構一層一層往里查找,到html元素,到body元素,再到box1元素,再到box2元素,再到box3元素,此時(shí)找到了觸發(fā)事件的元素,捕獲階段結束。之后進(jìn)入確認目標階段,開(kāi)始處理事件,彈出box3。處理事件完成后將事件根據結構依次傳遞給父元素,當傳遞到box2元素時(shí),發(fā)現box2有同類(lèi)型的事件,所以觸發(fā)box2的點(diǎn)擊事件彈出box2,再向外傳遞給box1元素,同理box1有同類(lèi)型的事件,彈出box1.

阻止冒泡:

如果你感覺(jué)冒泡機制影響了你的代碼,就可以進(jìn)行阻止冒泡。

標準瀏覽器:ev.stopPropagation();(ev為事件對象)

Ie瀏覽器:ev.cancelBubble = true;(ev為事件對象)

例如在上述代碼中只想讓box3觸發(fā)點(diǎn)擊事件,我們就可以給box3添加事件時(shí)寫(xiě)上

  1. oDiv[2].onclick = function (ev){ 
  2.    var ev = window.event || ev;  
  3.    ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true

 

文章“【W(wǎng)eb前端基礎知識】DOM事件流”已幫助

更多內容

>>本文地址:http://www.76097.cn/zhuanye/2021/70629.html

THE END  

聲明:本站稿件版權均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉載。

1 您的年齡

2 您的學(xué)歷

3 您更想做哪個(gè)方向的工作?

獲取測試結果
  • 大前端大前端
  • 大數據大數據
  • 互聯(lián)網(wǎng)營(yíng)銷(xiāo)互聯(lián)網(wǎng)營(yíng)銷(xiāo)
  • JavaJava
  • Linux云計算Linux
  • Python+人工智能Python
  • 嵌入式物聯(lián)網(wǎng)嵌入式
  • 全域電商運營(yíng)全域電商運營(yíng)
  • 軟件測試軟件測試
  • 室內設計室內設計
  • 平面設計平面設計
  • 電商設計電商設計
  • 網(wǎng)頁(yè)設計網(wǎng)頁(yè)設計
  • 全鏈路UI/UE設計UI設計
  • VR/AR游戲開(kāi)發(fā)VR/AR
  • 網(wǎng)絡(luò )安全網(wǎng)絡(luò )安全
  • 新媒體與短視頻運營(yíng)新媒體
  • 直播帶貨直播帶貨
  • 智能機器人軟件開(kāi)發(fā)智能機器人
 

快速通道fast track

近期開(kāi)班時(shí)間TIME