event事件3

<div id="outer">
<div id="middle">
<div id="inner"></div>
</div>
</div>

#outer{
width:400px;
height:400px;
background:red;
overflow:hidden;
}
#middle{
overflow:hidden;
width:300px;
height:300px;
margin-top:50px;
background:green;
}
#inner{
overflow:hidden;
width:200px;
height:200px;
margin-top:50px;
background:yellow;
}

<script type="text/javascript">
function stopProp(e){
var event = event||window.event;//前者event兼容非ie  后者兼容ie
　　　　　　　　　　　　　　　　　　//阻止冒泡
if(event.stopPropagation){
event.stopPropagation()
}else{
event.cancelBubble = true;
}
}

//			outer.onclick =function(e){
//				stopProp(e);
//				alert(1);
//			}
//			middle.onclick = function(e){
//				stopProp(e);
//				alert(2);
//			}
//			inner.onclick = function(e){
//				stopProp(e);
//				alert(3);
//			}

outer.addEventListener("click",function(){alert(1)},true);
middle.addEventListener("click",function(){alert(2)},false);
inner.addEventListener("click",function(){alert(3)},true);
</script>