event 事件 冒泡 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 400px;
				height: 300px;
				background: red;
				display: none;
			}
		</style>
		<script type="text/javascript">
		//事件冒泡  事件会冒泡到他的父级  onclick事件会冒泡到它的父级
		
			window.onload = function(){
				var oBtn = document.getElementById("btn");
				var oDiv = document.getElementById("div1");
				
				oBtn.onclick = function(ev){
					var oEvent = ev || event;
					
					oDiv.style.display = "block";
					
					oEvent.cancelBubble = true; //阻止事件冒泡
				}
				
				document.onclick = function(){
//					alert("document被执行了");
					oDiv.style.display = "none";
					
				}
			}
		</script>
	</head>
	<body>
		<input id="btn" type="button"  value="按钮"/>
		<div id="div1"></div>
	</body>
</html>

　　

posted @ 2016-03-12 13:28  mingjixiaohui  阅读(188)  评论(0)    收藏  举报