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

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

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

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

　　微軟公司提出的事件冒泡

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

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

　　網景公司提出的事件捕獲

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

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

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

?

　　 css樣式

?

js代碼

當我們去點擊oSmall的時候事件執(zhí)行的順序為：oSmall---->oBig----->body-----document

?

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

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

js代碼
　　

當我們去點擊oSmall的時候事件執(zhí)行的順序為：document---->body----->oBig-----oSmall

?

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

document----->html----->body----->.........---->目標元素 ? 捕獲過程 目標元素---->.........----->body---->html---->document ? ? 冒泡過程


------------------------------------------------------擴展當事件冒泡和事件捕獲一起使用的時候執(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í)行順序為：當點擊oSmall的時候執(zhí)行順序為

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

?

?

個人感覺這些東西在面試的時候會經常遇到。如果有不同意見可以私信本人！互相學習~~ ? 如需轉載請注明出處

轉載于:https://www.cnblogs.com/nanianqiming/p/7674745.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。