事件的發生順序
假設在一個元素中又嵌套了另一個元素並且兩者都有一個onClick事件處理函數(event handler)。如果用戶單擊元素2，則元素1和元素2的單擊事件都會被觸發。但是哪一個事件先被觸發？哪一個事件處理函數會被首先執行？換句話說，事件的發生順序到底如何？如下圖是當點擊span元素區域是，三個點擊事件都會被觸發，但是先後順序是怎樣的呢？
<div onclick="func1">
<p onclick="func2">
<span onclick=""func3>
</span>
</p>
</div>
兩種模型
對於這個事件的處理順序上，Netscape和微軟有兩種截然不同的處理方法：
•Netscape主張事件會從最外層開始發生，直到最具體的元素，這種事件發生順序被稱為捕獲型
•微軟則保持事件從最內部元素開始發生，然後一直向上傳播，這種事件順序被稱為冒泡型
這兩種事件順序是截然相反的。Explorer浏覽器只支持冒泡事件，Mozilla，Opera7和Konqueror兩者都支持。而更古老的opera和iCab兩者都不支持
w3c
任何發生在w3c事件模型中的事件，首是進入捕獲階段，直到達到目標元素，再進入冒泡階段。
對於正常的web開發，可以選擇是在捕獲階段還是冒泡階段綁定事件處理函數，這是通過addEventListener()方法實現的，如果這個函數的useCapture參數是true，則在捕獲階段綁定函數，反之false，在冒泡階段綁定函數。
element.addEventListener(event, function, useCapture)
阻止冒泡
在正常的開發過程中，如果想要阻止事件的傳播，通過一個方法實現。
在微軟的模型中，你必須設置事件的cancelBubble的屬性為true
window.event.cancelBubble = true
在w3c模型中你必須調用事件的stopPropagation()方法
e.stopPropagation()
通過調用這些方法會阻止所有冒泡向外傳播。跨浏覽器解決方案：
function doSomething(e) {
if (!e) {
var e = window.event;
e.cancelBubble = true;
}
if (e.stopPropagation) {
e.stopPropagation();
}
}
以上這篇深入理解事件冒泡(Bubble)和事件捕捉(capture)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。