<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Monaco; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Monaco; color: #d74200 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Monaco; color: #4f5d66 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Monaco; color: #4a8a01 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Monaco; color: #929151 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Monaco; color: #289c97 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Monaco; color: #060606 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Monaco; color: #a5b2b9 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Monaco }
span.s1 { color: #4f5d66 }
span.s2 { color: #d74200 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #2b7ec3 }
span.s6 { color: #000000 }
span.s7 { color: #929151 }
span.s8 { color: #060606 }
span.s9 { color: #ad42ef }
span.s10 { color: #4a8a01 }
span.s11 { color: #698906 }
span.s12 { color: #d16400 }
span.s13 { color: #d6225d }
span.s14 { color: #4663cc }
span.s15 { color: #e48b00 }
span.s16 { color: #b58a00 }
span.s17 { color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冒泡和捕获</title>
<style>
*{margin: 0;padding: 0;}
body{width:100%;}
div{width:80%;height: 80%;padding: 10%;position: relative;}
#a{background: rgba(255,0,0,.6);}
#b{background: rgba(0,255,0,.6);}
#c{background: rgba(0,0,255,.6);}
p{ color:#333;font-size: 1.2em;text-align: center; }
</style>
</head>
<body>
<div id="a">
<p> this is a div</p>
<div id="b">
<p>this is b div</p>
<div id="c">
<p>this is c div</p>
</div>
</div>
</div>
<script type="text/javascript">
var a = document.getElementById(‘a‘),
b = document.getElementById(‘b‘),
c = document.getElementById(‘c‘);
function addEvent(obj,ev,fn){
if(obj.attachEvent){//针对IE浏览器
obj.attachEvent(‘on‘+ev,fn)
}else{//针对FF与chrome
obj.addEventListener(ev,fn,false)//当为true时采用事件捕获，当为false采用事件冒泡
//程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡。
}
}
addEvent(a,‘click‘,function(){
alert(‘this is a div‘);
});
addEvent(b,‘click‘,function(){
alert(‘this is b div‘);
});
addEvent(c,‘click‘,function(){
alert(‘this is c div‘);
});
</script>
</body>
</html>
事件捕获和冒泡
