事件流 ---- 事件冒泡與事件捕獲

有時百感交集，卻又百口模辯，那些很遠的事，彷彿就在昨天,

寫手在做畫的夜晚，留下路人驚歎

事件流 ---- 事件冒泡與事件捕獲

 

 

首先在扯淡的時候咱們須要先了解一個東西，這個東西就是事件流。

一、什麼是事件流？

　　解釋：當一個HTML元素觸發一個事件處理函數的時候，該事件會在該元素節點到根節點之間傳播，傳播路徑所通過的節點都會接受到該事件，這樣的傳播過程叫DOM事件流。

　　簡單的解釋：元素觸發事件的時，傳播的過程稱爲事件流。

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

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

　　微軟公司提出的事件冒泡

三、什麼是事件捕獲？
　　解釋：假設你是捂襠派的一名弟子，在外遊行的時候跟跟別人發生了衝突(假設是縹緲峯),那麼縹緲峯的人確定第一時間就會找到你所在的門派。而後在找到你的師父在找到你，
　　而後跟你握手言和(純屬扯淡，現實中確定打的你連你媽都不認識你)，這樣的一個查找過程就是事件捕獲

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

　　網景公司提出的事件捕獲

 

四、瀏覽器事件默認執行並傳播的順序,首先咱們先來看事件冒泡執行並執行的順序

 

 css

 

 js

 

 當咱們去點擊oSmall的時候事件執行的順序爲：oSmall---->oBig----->body-----document

---

接下來咱們再來看事件捕獲執行並執行的順序(css html 代碼不變)
js

 

 當咱們去點擊oSmall的時候事件執行的順序爲：document---->body----->oBig-----oSmall

　　總結瀏覽器的事件默認執行並傳播的順序是： 　　document----->html----->body----->.........---->目標元素 捕獲過程 　　目標元素---->.........----->body---->html---->document     冒泡過程