javascript基礎（事件的傳播）（三十五）

厚積薄發2017發表於2017-02-14
JavaScript事件

1.事件的傳播：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 300px;
				height: 300px;
				background-color: deepskyblue;
			}
			
			#box2{
				width: 200px;
				height: 200px;
				background-color: cadetblue;
			}
			
			#box3{
				width: 100px;
				height: 100px;
				background-color: chocolate;
			}
			
		</style>
		
		<script type="text/javascript">
		
			function bind(obj , eventStr , callback){
				
				if(obj.addEventListener){
					//如果是正常瀏覽器
					obj.addEventListener(eventStr , callback , false);
				}else{
					//IE8
					obj.attachEvent("on"+eventStr , function(){
						callback.call(obj);
					});
				}
			}
			
			window.onload = function(){
				
				/*
				 * 事件的傳播
				 * 	- 關於事件的傳播微軟和網景公司有著不同的理解
				 * 	- 微軟公司，認為事件應該是從後代元素向祖先元素傳播，即從裡向外傳播，也就是我們所謂事件的冒泡
				 * 	- 網景公司，認為事件應該是從祖先元素向後代元素傳播，即從外向裡傳播，這一階段我們稱為事件的捕獲
				 * 	- W3C綜合了兩個公司的方案,將事件的傳播分成了三個階段
				 * 		1.捕獲階段
				 * 			- 事件從最外層的元素（document），向目標元素進行事件的捕獲
				 * 			- 此階段預設不會觸發事件
				 * 		2.目標階段
				 * 			- 目標指的是觸發事件的元素，捕獲到目標元素則捕獲階段停止
				 * 		3.冒泡階段
				 * 			- 事件從目標元素向祖先元素中冒泡，此時開始觸發事件
				 * 			- 預設事件都是在冒泡階段執行的
				 * 
				 * 	- 事件都是預設在冒泡階段執行的，一般不需要在捕獲階段觸發事件，
				 * 		如果希望在捕獲階段執行事件，則需要將addEventListener()的第三個引數修改為true
				 * 
				 * 	- IE8及以下的瀏覽器沒有捕獲階段，也不能設定在捕獲階段觸發事件
				 */
				
				//分別為三個div繫結單擊響應函式
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var box3 = document.getElementById("box3");
				
				bind(box1,"click",function(){
					alert(1);
				})
				
				bind(box2,"click",function(){
					alert(2);
				})
				
				bind(box3,"click",function(){
					alert(3);
				})
				
			};
			
			
		</script>
	</head>
	<body>
		
		<div id="box1">
			<div id="box2">
				<div id="box3"></div>
			</div>
		</div>
		
	</body>
</html>


 

相關文章