js事件冒泡与事件捕获详解

<button id="A" onclick="handler(this)">方式二</button>
<script>
 function handler(btn){
 alert(this.id); //undefined this指向window对象
 alert(btn.id); //A 
 }
</script>

<button id="A">方式三</button>
<script>
 var btn = document.getElementById("A");
 btn.onclick = function(){
 alert("1:"+this.id);
 }
 btn.onclick = function(){
 alert("2:"+this.id);
 }
 //只能绑定一个事件处理函数，后面的会覆盖前面的；
</script>

<button id="B">W3C标准一</button>
<script>
 var btn = document.getElementById("B");
 btn.addEventListener("click",handler,false);
 function handler(){
 alert(this.id); //B this指向的是dom对象； attachEvent指向的是window对象
 }
</script>

<button id="B">W3C标准二</button>
<script>
 var btn = document.getElementById("B");
 btn.addEventListener("click",handler,true);
 btn.addEventListener("click",handler,false);
 function handler(){
 alert(this.id); //B
 }
 //当点击按钮时，函数handler会执行2次，一次为事件捕获，一次为事件冒泡；
 //如果绑定的是同一个事件处理函数，且都是事件捕获或都是事件冒泡，那么只能绑定一次；
</script>

<button id="C">IE</button>
<script>
 var btn = document.getElementById("C");
 btn.attachEvent("click",handler);
 function handler(){
 alert(this.id); //undifined this指向的是window对象； addEventListener指向的是dom对象
 }
</script>

<div id="A">
 <div id="B">
 <div id="C"></div>
 </div>
</div>

<div id="A" style="width:300px; height:300px; background:red;position:relative;">
 <div id="B" style="width:200px;height:200px; background:green;position:relative;:50px;margin:auto;">
 <div id="C" style="width:100px;height:100px; background:blue;position:relative;:50px;margin:auto;"></div> 
 </div>
</div>
<script>
 var A = document.getElementById("A"); 
 var B = document.getElementById("B"); 
 var C = document.getElementById("C"); 
 // 目标（目标阶段的处理函数，先注册先执行）
 C.addEventListener('click',function(){alert("Ct");},true);
 C.addEventListener('click',function(){alert("Cf");},false);
 // 事件冒泡
 A.addEventListener('click',function(){alert("Af");},false);
 B.addEventListener('click',function(){alert("Bf");},false);
 // 事件捕获
 A.addEventListener('click',function(){alert("At");},true);
 B.addEventListener('click',function(){alert("Bt");},true); 
</script>
//当点击C时（蓝色），输出At Bt Ct Cf Bf Af