javascript基礎（DOM物件概述,事件，文件載入）（二十五）

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

1.DOM物件概述：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button id="btn">我是一個按鈕</button>
		
		<script type="text/javascript">
			
			/*
			 * 瀏覽器已經為我們提供了document物件，
			 * 	它代表整個的網頁，它是window物件的屬性，可以在頁面中直接使用
			 */
			//console.log(document);
			
			//獲取id為btn的按鈕物件
			var btn = document.getElementById("btn");
			
			//修改按鈕中的文字
			//innerHTML 可以獲取標籤內部的文字內容
			btn.innerHTML = "I'm Button";
			
			
			
			
		</script>
	</body>
</html>


2.事件： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			可以為元素的指定的事件屬性設定JS程式碼來處理事件
			我們通過HTML屬性的形式來處理事件，屬於結構和行為耦合，不方便維護，不推薦使用
		-->
		<!--<button id="btn" onmousemove="alert('討厭，點我幹嘛~~');">點我一下</button>-->
		<button id="btn">點我一下</button>
		
		<script type="text/javascript">
			
			/*
			 * 事件（Event）
			 * 	- 事件指使用者和瀏覽器之間的互動行為，
			 * 		比如：點選按鈕，滑鼠移動，關閉視窗。。。
			 * 	- 我們可以為事件來繫結處理函式，來對事件進行處理
			 * 		當事件觸發時，相應的函式會被呼叫
			 */
			
			//獲取按鈕物件
			var btn = document.getElementById("btn");
			
			/*
			 * 可以為元素的指定的事件屬性繫結回撥函式的形式來響應事件,
			 * 	該函式會在指定事件觸發時才執行
			 */
			
			//為btn繫結一個單擊響應函式
			btn.onclick = function(){
				alert("hello");
			};
			
		</script>
	</body>
</html>

3.文件載入：

方式一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//獲取id為btn的按鈕
			var btn = document.getElementById("btn");
			
			//為btn繫結一個單擊響應函式
			/*btn.onclick = function(){
				console.log("hello");
			};*/
			
			//console.log(btn);
			
			/*
			 * 瀏覽器在載入頁面時，是按照自上向下的順序進行載入的，
			 * 	當它載入到JS程式碼時，會將JS程式碼立即執行，
			 * 	如果將JS程式碼編寫到網頁的上邊，會導致JS執行時頁面還沒有完全載入
			 * 	將會導致無法正常獲取到DOM物件
			 */
			//alert("hello");
			
		</script>
	</head>
	<body>
		<button id="btn">點我一下</button>
		
		<script type="text/javascript">
			/*
			 * 將js程式碼編寫到body的下邊，可以確保程式碼在頁面載入完畢才執行，
			 * 	這樣可以保證正常獲取到DOM物件
			 */
			
			//alert("hello");
			
		</script>
		
	</body>
</html>
方式二：（推薦） 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * window的onload事件會在頁面載入完畢之後觸發，
			 * 	它所對應的回撥函式，會在頁面載入完畢之後執行
			 * 
			 * 以後寫js程式碼時，上來就把window.onload = function(){}寫上
			 */
			window.onload = function(){
				//我們希望程式碼可以在頁面載入完畢以後再執行
				//alert("hello");
				
				//獲取id為btn物件
				var btn = document.getElementById("btn");
				
				btn.onclick = function(){
					console.log("hello");
				};
				
			};
			
		</script>
	</head>
	<body>
		<button id="btn">點我一下</button>
	</body>
</html>





相關文章