javaScript对冒泡做一些分析与测试
<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.onload=function(){
/*
document.getElementById('obody').onclick=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').onclick=function(evt){
var e=evt||winow.event;
console.info("谢谢光顾body");
};
document.getElementById('div11').onclick=function(evt){
var e=evt||winow.event;
console.info("谢谢光顾div11");
e.stopPropagation();
//换一种不行
//e.preventDefault();//通知浏览器不要执行与事件关联的默认动作
//事件传播和默认操作是二个不同的机制，
//一个是向上冒泡 一个是执行默认操作
};
//测试结果ok
//第二种
//为了正常的向上冒泡，那就用代理吧(听起来可怕，实现起来很简单)
/*
document.getElementById('obody').onclick=function(evt){
var e=evt||winow.event;
if(e.target.id=='div11'){
console.info("谢谢光顾div11");
}else if(e.target.id=='obody'){
console.info("谢谢光顾body");
}
};
*/
};//到此结束