<script src="js/冒泡.js"></script>
<script type=text/javascript>
</script>
<style>
body{
margin:0px;
padding:0px;
}
#div1{
width:300px;
height:200px;
background:#CC3;
margin:30px auto 0px 10px;
position:relative;
}
#div2{
width:300px;
height:200px;
background:#096;
position:absolute;
left:310px;
}
#div11{
margin-left:10px;
}
</style>
</head>
<body id='obody'>
<div id='div1' class='div1'>
xxxxxx
<div id='div11' class='div1'>fasdfa</div>
</div>
<div id='div2' class='div1'>
</div>
<div id='div3' class='div1' style="width:200px">
<div id='div31' class='div1'></div>
</div>
</body>
//冒泡
//若有結構如body--div1--div11 冒泡就是從div11--div1--body每一個節點都會觸發事件
//來一例子
window.οnlοad=function(){
/*
document.getElementById('obody').οnclick=function(evt){
var e=evt||winow.event;
console.info("返回觸發此事件的元素: "+e.target+" "+"返回其事件監聽器觸發該事件的元素: "+e.currentTarget);
console.info("返回觸發此事件的元素id: "+e.target.id+" "+"返回其事件監聽器觸發該事件的元素id: "+e.currentTarget.id);
//結果對比下
//返回觸發此事件的元素: [object HTMLDivElement] 返回其事件監聽器觸發該事件的元素: [object HTMLBodyElement]
//冒泡.js:9 返回觸發此事件的元素id: div1 返回其事件監聽器觸發該事件的元素id: obody
//冒泡.js:8 返回觸發此事件的元素: [object HTMLDivElement] 返回其事件監聽器觸發該事件的元素: [object HTMLBodyElement]
//冒泡.js:9 返回觸發此事件的元素id: div11 返回其事件監聽器觸發該事件的元素id: obody
};
*/
//由冒泡特性，如果我對body--div1--div三個節點分別添加了事件，根據其特性可知，點了div11，他的事件會觸發，div1也會，當然包括body了
//所以有個要解決的問題就是，點了div11就觸發div11的事件，
//解決方案有兩種,一種不讓它向上冒泡，第二種就是代理了,第一種是有缺點的
//第一種
document.getElementById('obody').οnclick=function(evt){
var e=evt||winow.event;
console.info("謝謝光顧body");
};
document.getElementById('div11').οnclick=function(evt){
var e=evt||winow.event;
console.info("謝謝光顧div11");
e.stopPropagation();
//換一種不行
//e.preventDefault();//通知瀏覽器不要執行與事件關聯的默認動作
//事件傳播和默認操作是二個不同的機制，
//一個是向上冒泡 一個是執行默認操作
};
//測試結果ok
//第二種
//爲了正常的向上冒泡，那就用代理吧(聽起來可怕，實現起來很簡單)
/*
document.getElementById('obody').οnclick=function(evt){
var e=evt||winow.event;
if(e.target.id=='div11'){
console.info("謝謝光顧div11");
}else if(e.target.id=='obody'){
console.info("謝謝光顧body");
}
};
*/
};
//到此結束