<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()阻止传播，那么该事件会在此处终结(结束后续捕获，目标，传递阶段的所有动作)。