JavaScript學習12：事件對象

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

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

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

        當觸發某個事件時，會産生一個事件對象，這個對象包含着所有與事件有關的資訊。包括導緻事件的元素、事件的類型、以及其他與特定事件相關的資訊。

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

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

document.οnclick=box;  //事件綁定函數，傳回值為1，得到一個隐藏的參數</span>
           

        通過上面兩組函數的比較，發現，通過事件綁定的執行函數是可以得到一個隐藏參數的，這就說明，浏覽器會自動配置設定一個參數，這個參數其實就是event對象。我們可以将這個對象輸出來看看，是什麼   

<span style="font-size:18px;">document.οnclick=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.οnmοuseup=function(evt){
	if(getButton(evt)==0){
		alert('您按下了左鍵！');
	}else if(getButton(evt)==1){
		alert('您按下了中鍵！');
	}else if(getButton(evt)==2){
		alert('您按下了右鍵！');
	}
};


//擷取可視區及螢幕區的坐标
document.οnclick=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.οnkeydοwn=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>
           

        事件流

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

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

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