首先在扯淡的時候我們需要先了解一個東西，這個東西就是事件流。1、什么是事件流？解釋：當(dāng)一個HTML元素觸發(fā)一個事件處理函數(shù)的時候，該事件會在該元素節(jié)點(diǎn)到根節(jié)點(diǎn)之間傳播，傳播路徑所經(jīng)過的節(jié)點(diǎn)都會接受到該事件，這樣的傳播過程叫DOM事件流。

　　簡單的解釋：元素觸發(fā)事件的時，傳播的過程稱為事件流。

　　事件流分為：事件冒泡和事件捕獲

2、什么是事件冒泡？
　　解釋：事件冒泡可以形象的比喻成把一個石頭丟進(jìn)水中,泡泡會一直從水底冒出水面,也就是說事件會從最內(nèi)層的元素開始發(fā)生，一直到向上傳播，知道根節(jié)點(diǎn)

　　微軟公司提出的事件冒泡

3、什么是事件捕獲？
　　解釋：假設(shè)你是捂襠派的一名弟子，在外游行的時候跟跟別人發(fā)生了沖突(假設(shè)是縹緲峰),那么縹緲峰的人肯定第一時間就會找到你所在的門派。然后在找到你的師父在找到你，
　　然后跟你握手言和(純屬扯淡，現(xiàn)實中肯定打的你連你媽都不認(rèn)識你)，這樣的一個查找過程就是事件捕獲

　　簡單的解釋：事件的傳播由父元素到子元素傳遞的過程，稱為事件捕獲

　　網(wǎng)景公司提出的事件捕獲

--------------------------------------------------------下面讓我們進(jìn)入扯淡的重點(diǎn)環(huán)節(jié)-----------------------------------------------------------------

4、瀏覽器事件默認(rèn)執(zhí)行并傳播的順序

　　首先我們先來看事件冒泡執(zhí)行并執(zhí)行的順序
　　

?

　　 css樣式

?

js代碼

當(dāng)我們?nèi)c(diǎn)擊oSmall的時候事件執(zhí)行的順序為：oSmall---->oBig----->body-----document

?

-----------------------------------------------------------------------------------------------------------------------------------------------------

接下來我們再來看事件捕獲執(zhí)行并執(zhí)行的順序(css html 代碼不變)

js代碼
　　

當(dāng)我們?nèi)c(diǎn)擊oSmall的時候事件執(zhí)行的順序為：document---->body----->oBig-----oSmall

?

　　總結(jié)瀏覽器的事件默認(rèn)執(zhí)行并傳播的順序是：

document----->html----->body----->.........---->目標(biāo)元素 ? 捕獲過程 目標(biāo)元素---->.........----->body---->html---->document ? ? 冒泡過程


------------------------------------------------------擴(kuò)展當(dāng)事件冒泡和事件捕獲一起使用的時候執(zhí)行的順序------------------------------------------------------

document.onclick = function(){
alert("document---冒泡")
};

document.addEventListener("click",function(){
alert("document---捕獲")
},true)

document.body.onclick = function(){
alert("body----冒泡")
}
document.body.addEventListener('click',function(){
alert("body----捕獲")
},true)


oBig.onclick = function(){
alert("oBig---冒泡")
}
oBig.addEventListener('click',function(){
alert("oBig----捕獲")
},true)


oSmall.onclick = function(){
alert("oSmall--冒泡")
}
oSmall.addEventListener('click',function(){
alert("oSmall----捕獲")
},true)

?

執(zhí)行順序為：當(dāng)點(diǎn)擊oSmall的時候執(zhí)行順序為

document---捕獲 ? ? body----捕獲 ? ?oBig----捕獲 ? ?oSmall--冒泡 ? ? oSmall----捕獲 ? ?oBig---冒泡 ? ?body----冒泡 ? ?document---冒泡

?

?

個人感覺這些東西在面試的時候會經(jīng)常遇到。如果有不同意見可以私信本人！互相學(xué)習(xí)~~ ? 如需轉(zhuǎn)載請注明出處

轉(zhuǎn)載于:https://www.cnblogs.com/nanianqiming/p/7674745.html

總結(jié)

以上是生活随笔為你收集整理的【事件流】浅谈事件冒泡事件捕获------【巷子】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。