DOM事件冒泡與捕獲說明

<style>
#div11{width: 200px; height: 600px; background-color: #eee; text-align: center; }
#div22{width: 175px; height: 500px; background-color: #ccc; text-align: center; margin:10px; }
#div33{width: 150px; height: 400px; background-color: #999; text-align: center; margin:10px; }
#div44{width: 125px; height: 300px; background-color: #666; text-align: center; margin:10px; }
#div55{width: 100px; height: 200px; background-color: #333; text-align: center; margin:10px; }
</style>
<div id="div11">1
<div id="div22">2
<div id="div33">3
<div id="div44">4
<div id="div55">5</div>
</div>
</div>
</div>
</div>
<script>
div11.addEventListener('click',d1,false);
div22.addEventListener('click',d2,false);
div33.addEventListener('click',d3,true);
div44.addEventListener('click',d4,true);
div55.addEventListener('click',d5,false);
function d1(e) { console.log('d1'); console.log(e.currentTarget,e.target); }
function d2(e) { console.log('d2'); console.log(e.currentTarget,e.target); }
function d3(e) { console.log('d3'); console.log(e.currentTarget,e.target); }
function d4(e) { console.log('d4'); console.log(e.currentTarget,e.target); }
function d5(e) { console.log('d5'); console.log(e.currentTarget,e.target); }
</script>

關於事件捕獲和冒泡有4個很重要的說明：
1、各層(至少2層以上)的DOM元素要有預先綁定好同一個事件(事件執行處理內容可以各不相同)，然後纔可談及捕獲和冒泡，否則一切免談；
2、捕獲階段，目標階段，冒泡階段是任何情況下事件流始終都會走的三個階段，但是：
是否捕獲成功取決於第3個參數是否爲true，且只針對該事件當前層的DOM節點，不影響其它層的捕獲
是否阻止冒泡取決於e.bubbles參數是否爲false，如果調用了e.stopPropagation()阻止傳播，那麼
將阻止在該事件當前層的DOM節點往上(祖先節點)的所有節點的事件；
3、如果某層DOM事件被捕獲成功，那麼它就不會再進入該事件的冒泡階段；
4、如果某事件被觸發後(無論是因捕獲還是冒泡)，同時還調用了e.stopPropagation()阻止傳播，那麼該事件會在此處終結(結束後續捕獲，目標，傳遞階段的所有動作)。