瀏覽器事件捕獲冒泡以及阻止冒泡

瀏覽器事件捕獲冒泡以及阻止冒泡

dom事件流有三個階段，捕獲階段—>目標階段—>冒泡階段，不管是有沒有繫結事件，只要發生點選事件，事件的處理將從dom層次的根開始，而不是從觸發事件的目標元素開始，事件被從目標元素的所有祖先元素依次往下傳遞，直到目標元素然後再從目標元素冒泡到根元素。這是事件觸發後的整個固定流程，至於要在哪個點繫結事件看具體需要。

舉個小例說明下：

<

body
>
<
div 
id="box1"
>
<
div 
id="box2"
>
<
div 
id="box3"
>
div>
div>
div>
body
>

//正常點選dom1、dom2.dom3//點選dom3  輸出結果依次為 cp1->cp2->target->cp3->bb3->bb2->1

//點選dom2  輸出結果依次為 cp1->cp2->bb2->bb1

//點選dom1  輸出結果依次為 cp1->bb1

//阻止冒泡（一般事件繫結在冒泡階段）

//點選dom3  輸出結果依次為 target3

//點選dom2  輸出結果依次為 target2

//點選dom1  輸出結果依次為 target1

//以上在谷歌瀏覽器親測正常！

stioppropagation()方法

stioppropagation()方法的的官方解釋為：終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播。呼叫該方法後，該節點上處理該事件的處理程式將被呼叫，事件不再被分派到其他節點。

取消事件的預設動作。

這個方法通知瀏覽器取消執行與事件關聯的預設動作。如標籤的位址跳轉等:

對於這個方法，相信同學們一定不會陌生。在甚多時候，return false可以替代stoppropagation()和preventdefault()。

但是並不是所有的情況下都可以用return false來替代上兩種方法。

因為return false方法：不但阻止事件執行，而且會跳出，return false之後的所有事件都不會執行。

冒泡事件 捕獲事件 阻止事件

father sonview code 建立父子盒子 view code 建立兩個盒子的樣式 直接上圖 冒泡事件 div1代表父盒子 div2代表子盒子 當子盒子被點選時會先處理自己，搞完自己就產生了冒泡 就是向上查詢直到document結束 為什麼不是html而是document?不是都在html...

瀏覽器事件是冒泡還是捕獲

1 冒泡型事件 事件按照從最特定的事件目標到最不特定的事件目標 document物件 的順序觸發。ie 5.5 div body document ie 6.0 div body html document mozilla 1.0 div body html document window 2 捕獲...

JS阻止事件冒泡以及瀏覽器預設行為

e的相容 function fn e firefox裡的event跟ie裡的不同，ie裡的是全域性變數，隨時可用。firefox裡的要用引數引導才能用，是執行時的臨時變數 在ie opera中是window.event，在firefox中是event。而事件的物件，在ie中是window.event...