JavaScript學習12：事件對象__Java

        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>

        事件流

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

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

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