1. 程式人生 > >好好學一遍JavaScript 筆記(九)——事件處理函式/監聽函式/事件物件

好好學一遍JavaScript 筆記(九)——事件處理函式/監聽函式/事件物件

歡迎技術交流。 QQ:138986722

事件處理器是與特定的文字和特定的事件相聯絡的JavaScript指令碼程式碼,當該文字發生改變或者事件被觸發時,瀏覽器執行該程式碼並進行相應的處理操作,而響應某個事件而進行的處理過程稱為事件處理。HTML文件事件包括使用者載入目標頁面直到該頁面被關閉期間瀏覽器的動作及該頁面對使用者操作的響應,主要分為瀏覽器事件和HTML元素事件兩大類。在瞭解這兩類事件之前,先來了解事件捆綁的概念。HTML文件將元素的常用事件(如onclick、onmouseover等)當作屬性捆綁在HTML元素上,當該元素的特定事件發生時,對應於此特定事件的事件處理器就被執行,並將處理結果返回給瀏覽器。事件捆綁導致特定的程式碼放置在其所處物件的事件處理器中。如果在javaScript中分配事件處理函式、則需要首先獲得要處理的物件的引用、然後將函式賦值給對應的事件處理函式屬性、示例:

<div id="divId">點選</div> 
    <!-- 注意JS程式碼要放在div元素之後、如果先執行JS在執行div元素的話、
         document是獲取不到物件的、要時刻記住、解釋執行的的特性
                        另外一點就是事件處理函式名稱必須小寫才能正確響應事件。 -->
    <script type="text/javascript">
			var oDiv = document.getElementById("divId");
			oDiv.onclick = function (){
				alert("javaScript事件處理函式!"); 
			};  
	</script>
	<div onClick="alert('HTML中分配事件處理函式!');">點選</div> 

事件物件
建立包含關於剛剛發生的事件的資訊的事件物件、包含的資訊如下:
        1、引起事件的物件;
        2、事件發生時滑鼠的資訊;
        3、事件發生時鍵盤的資訊。

事件物件只在發生事件時才被建立、且只有事件處理函式才能訪問。所有事件處理函式執行完畢後、事件物件就被銷燬。

定位:
        在IE中、事件物件是Window物件的一個屬性event。事件處理函式必須這樣訪問事件物件:

 oDiv.onclick = function () {
            var oEvent = window.event;
        }
        在DOM相容的瀏覽器(如Mozilla、Safari和Opera)中訪問事件物件、要這麼做:

oDiv.onlcik =function (){
            var oEvent = arguments[0];
        }
        也可以直接命名引數、訪問就更方便:
oDiv.onclick = function (oEvent) {}

屬性方法:

下面是IE中的屬性以及方法


DOM事件物件屬性核心方法

相似性:

1、獲取事件型別
這樣可在任何一種瀏覽器中獲取事件的型別:

var sType = oEvent.tyep;
<div id="divId">
  	---------------------------------------------------------------------------------------------------------------------------------
  	---------------------------------------------------------------------------------------------------------------------------------
  	---------------------------------------------------------------------------------------------------------------------------------
  	---------------------------------------------------------------------------------------------------------------------------------
  	</div>
  	<div>
  		<input type="text" id="testId" onkeydown="keyFunction();" onkeyup="keyFunction();"/>
  	</div>  
  	<script type="text/javascript">
  		var oDiv = document.getElementById("divId"); 
		function eFunction(oEvent){
			/**oEvent.type在IE會報錯、說type為空或不是物件、火狐木有問題**/
			if(oEvent.type == "click"){
				alert("click");
			}else if(oEvent.type == "mouseover"){
				alert("mouseover");
			}
		} 
		function ieFunction(){  
			/**IE需要這樣獲取event物件**/
			var oEvent = window.event;
			if(oEvent.type == "click"){
				alert("click");
			}else if(oEvent.type == "mouseover"){
				alert("mouseover"); 
			}
			
			
			/**
			 * 獲取客戶端座標
			 */
			 alert("獲取客戶端座標X: "+oEvent.clientX+"   Y: "+oEvent.clientY);
			
			
			/**
			 * 獲取螢幕座標 
			 */
			 alert("獲取螢幕座標X: "+oEvent.screenX+"   Y: "+oEvent.screenY);
		}
		//oDiv.onclick = eFunction;
		//oDiv.onmouseover = eFunction; 
		oDiv.onclick = ieFunction;  
		oDiv.onmouseover = ieFunction;  
		
		
		/**獲取按鍵的數值程式碼**/
		function keyFunction(){ 
			/**
			 * onkeyup 是在使用者放開任何先前按下的鍵盤鍵時發生。
			 * onkeydown 是在使用者按下任何鍵盤鍵時發生。  
			 */ 
			var oEvent = window.event;  
			var keyValue = oEvent.keyCode;
			//alert(keyValue);  
			
			/**檢測shift、alt鍵是否被按下返回的是boolean值**/
			var bshift = oEvent.shiftKey;  
			var balt = oEvent.altKey; 
			alert("shift: "+bshift+" alt:"+balt);      
		}
	</script>