javaScript对冒泡做一些分析与测试

AndroidJava

2015-04-30

<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");
						}
			};
			*/
	};

//到此结束

javascript 脚本