JavaScript學習12：事件物件

        JavaScript事件的一個重要方面是它們擁有一些相對一致的特點，可以給我們的開發提供更多的強大功能。最方便和強大的就是事件物件了，它們可以幫你處理滑鼠和鍵盤方面的很多事情，此外我們還可以修改一般事件的捕獲或者冒泡流的函式。

        在上篇部落格中我們已經對事件有了一個基本的認識，結尾處我們提到了事件處理函式。事件處理函式的一個標準特性是，以某些方式訪問的事件物件包含有關於當前事件的上下文資訊。事件處理由三部分組成：物件.事件處理函式=函式。

        那麼事件物件又是什麼呢？它在哪裡？

        當觸發某個事件時，會產生一個事件物件，這個物件包含著所有與事件有關的資訊。包括導致事件的元素、事件的型別、以及其他與特定事件相關的資訊。

        事件物件，我們一般稱作為event物件，這個物件是瀏覽器通過函式把這個物件作為引數傳遞過來的。那麼首先，我們就必須驗證一下，在執行函式中有沒有傳遞引數，是否可以得到隱藏的引數。     

<span style="font-size:18px;">function box(){
	alert(arguments.length);
}
window.box();          //普通空參函式，返回值為0，沒有得到任何傳遞的引數

document.onclick=box;  //事件繫結函式，返回值為1，得到一個隱藏的引數</span>

        通過上面兩組函式的比較，發現，通過事件繫結的執行函式是可以得到一個隱藏引數的，這就說明，瀏覽器會自動分配一個引數，這個引數其實就是event物件。我們可以將這個物件輸出來看看，是什麼   

<span style="font-size:18px;">document.onclick=function(){
	alert(arguments[0]);  //列印出來的是MouseEvent，即滑鼠事件物件
}</span>

        滑鼠事件

        滑鼠事件是Web上面最為常用的一類事件，畢竟滑鼠還是最主要的定位裝置。那麼我們可以通過事件物件獲取到滑鼠按鈕資訊和螢幕座標等等。    

<span style="font-size:18px;">//跨瀏覽器左中右鍵單擊響應
function getButton(evt){
	var e = evt||window.event;
	if(evt){
		return e.button;
	}else if(window.event){
		switch(e.button){
			case 1:
				return 0;
			case 4:
				return 1;
			case 2:
				return 2;
		}
	}
}
document.onmouseup=function(evt){
	if(getButton(evt)==0){
		alert('您按下了左鍵！');
	}else if(getButton(evt)==1){
		alert('您按下了中鍵！');
	}else if(getButton(evt)==2){
		alert('您按下了右鍵！');
	}
};


//獲取可視區及螢幕區的座標
document.onclick=function(evt){
	var e=evt||window.event;
	alert(e.clientX+','+e.clientY+','+e.screenX+','+e.screenY);
};</span>

        鍵盤事件

        使用者在使用鍵盤時會觸發鍵盤事件。DOM2級事件最初規定了鍵盤事件，結果又刪除了相應的內容，最終還是使用了最初的鍵盤事件，不過IE9已經開始支援DOM3級鍵盤事件了。

        1鍵碼

        在發生keydown和keyup事件時，event物件的keyCode屬性中會包含一個程式碼，與鍵盤上一個特定的鍵對應。    

<span style="font-size:18px;">document.onkeydown=function(evt){
	alert(evt.keyCode);
};</span>

        2字元編碼

        Firefox、Chrome和Safari的event物件都支援一個charCode屬性，這個屬性只有在發生keypress事件時才包含值，而且這個值是按下的那個鍵所代表字元的ASCII編碼。此時的keyCode通常等於0或者可能是按鍵的編碼。

<span style="font-size:18px;">function getCharCode(evt){
	var e=evt||window.event;
	if(typeof e.charCode=='number'){
		return e.charCode;
	}else{
		return e.keyCode;
	}
}</span>

        事件流

        最後我們要補充一個知識點，那就是事件流。這個我在上篇部落格中也提到過，只不過當時認識並不是很深刻。事件流是描述的從頁面接受事件的順序，當幾個都具有事件的元素層疊在一起的時候，那麼你點選其中一個元素，並不是只有當前被點選的元素會觸發事件，而層疊在你點選範圍的所有元素都會觸發事件。事件流包括兩種模式：冒泡和捕獲。

        事件冒泡，是從裡向外逐個觸發；事件捕獲，是從外向裡逐個觸發，下面的圖可以形象的說明這點：

      

        小結一下：對於事件的學習，還在進一步的加深過程中，事件物件的瞭解，讓我對事件的認識更加全面，同時也為我靈活使用事件打下了基礎。