javascript基礎（事件物件）（三十一）

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

1.事件物件：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

	#areaDiv {
		border: 1px solid black;
		width: 300px;
		height: 50px;
		margin-bottom: 10px;
	}
	
	#showMsg {
		border: 1px solid black;
		width: 300px;
		height: 20px;
	}

</style>
<script type="text/javascript">

	window.onload = function(){
		
		/*
		 * 滑鼠在大div中移動時，在小div中顯示滑鼠的座標
		 */
		
		//獲取兩個div
		var areaDiv = document.getElementById("areaDiv");
		var showMsg = document.getElementById("showMsg");
		
		//為areaDiv繫結一個滑鼠移動的事件
		/*
		 * 事件物件
		 * 	- 當瀏覽器呼叫事件的響應函式時，每次都會傳遞一個事件物件作為引數，
		 * 		在事件物件封裝了當前事件相關的資訊，比如：滑鼠的座標 鍵盤哪個按鍵被按下。。。
		 * 		我們可以通過該物件來獲取事件相關的資訊
		 */
		areaDiv.onmousemove = function(event){
			
			//clientX可以獲取滑鼠指標的水平座標
			//clientY可以獲取滑鼠指標的垂直座標
			/*var x = event.clientX;
			var y = event.clientY;*/
			
			//處理相容性的問題
			/*if(!event){
				event = window.event;
			}*/
			
			event = event || window.event ;
			
			/*
			 * 在IE8及以下的瀏覽器中，沒有將事件物件作為引數傳遞進函式，
			 * 	所以我們就不能以引數的形式來使用事件物件。
			 * 
			 * 在IE8中，是將事件物件作為window物件的屬性儲存的
			 * 	需要使用window.event來使用
			 */
			var x = event.clientX;
			var y = event.clientY;
			
			//alert("x = "+x +" y = "+y);
			
			//在shouMsg中顯示滑鼠的座標
			showMsg.innerHTML = "x = "+x +" , y = "+y;
			
		};
		
		
		
		
		
	};

</script>
</head>
<body>

	<div id="areaDiv"></div>
	<div id="showMsg"></div>

</body>
</html>

練習：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				
				/*開啟絕對定位*/
				position: absolute;
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 使div可以跟隨滑鼠移動
				 * 
				 * 使div跟隨滑鼠移動，實際上就是將div的偏移量設定為滑鼠的座標
				 */
				
				//獲取box1
				var box1 = document.getElementById("box1");
				
				//繫結一個滑鼠移動的事件
				document.onmousemove = function(event){
					//處理相容的問題
					event = event || window.event;
					
					/*
					 * 事件物件的clientX和clientY獲取的座標是滑鼠相對於瀏覽器視窗可見區域的座標
					 * 	但是元素的偏移量相對於頁面的，所以當拖動滾動條時，會發現滑鼠指標和元素的位置發生了偏離
					 * 
					 * 為了解決這個問題，可以將滾動條滾動的距離加到偏移量中
					 */
					//獲取垂直方向的滾動距離
					/*
					 * 在chrome瀏覽器中，認為視窗的滾動條就是body的，可以通過body來獲取
					 * 
					 * 而其他瀏覽器認為瀏覽器的滾動條是html的，需要通過html根標籤來獲取
					 */
					//var st = document.body.scrollTop;
					//var st = document.documentElement.scrollTop;
					var st = document.documentElement.scrollTop || document.body.scrollTop;
					var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
					
					
					
					
					//獲取滑鼠的座標
					/*
					 * pageX
					 * pageY
					 * 	- 可以獲取滑鼠指標相對於頁面的水平和垂直座標
					 * 	- 但是這兩個屬性在IE8及以下的瀏覽器中並不支援，所以如果需要相容IE8則不能使用
					 */
					var left = event.clientX;
					var top = event.clientY;
					
					//修改box1的偏移量
					box1.style.left = left + sl + "px";
					box1.style.top = top + st + "px";
					
				};
				
				
			};
			
		</script>
	</head>
	<body style="height: 3000px; width: 3000px;">
		
		<div id="box1"></div>
		
	</body>
</html>



 

 

相關文章