JS鍵盤事件種類、兼容和優化

1、瀏覽器的按鍵事件總結

用js實現鍵盤記錄，要關注瀏覽器的三種按鍵事件類型，即keydown，keypress和keyup，它們分別對應onkeydown、 onkeypress和onkeyup這三個事件句柄。一個典型的按鍵會產生全部這三種事件，依次是keydown，keypress，而後是按鍵釋放時候的keyup。

在這3種事件類型中，keydown和keyup比較底層，而keypress比較高級。這裏所謂的高級是指，當用戶按下shift + 1時，keypress是對這個按鍵事件進行解析後返回一個可打印的「!」字符，而keydown和keyup只是記錄了shift + 1這個事件。可是keypress只能針對一些能夠打印出來的字符有效，而對於功能按鍵，如F1-F十二、Backspace、Enter、Escape、 PageUP、PageDown和箭頭方向等，就不會產生keypress事件，可是能夠產生keydown和keyup事件。然而在FireFox中，功能按鍵是能夠產生keypress事件的。

傳遞給keydown、keypress和keyup事件句柄的事件對象有一些通用的屬性。若是Alt、Ctrl或Shift和一個按鍵一塊兒按下，這經過事件的altKey、ctrlKey和shiftKey屬性表示，這些屬性在FireFox和IE中是通用的。

2、兼容瀏覽器

凡是涉及瀏覽器的js，就都要考慮瀏覽器兼容的問題。目前經常使用的瀏覽器主要有基於IE和基於Mozilla兩大類。IE、Maxthon（非極速版）、360瀏覽器（非極速版）是基於IE內核的，而FireFox和Opera是基於Mozilla內核的。

一、事件的初始化
首先須要瞭解的是如何初始化該事件，基本語句以下：
　　 function keyDown(){}
　　 document.onkeydown = keyDown;
當瀏覽器讀到這個語句時，不管按下鍵盤上的哪一個鍵，都將呼叫KeyDown()函數。

二、FireFox和Opera的實現方法
FireFox和Opera等程序實現要比IE麻煩，因此這裏先描述一下。keyDown()函數有一個隱藏的變量--通常的，咱們使用字母「e」來表示這個變量。  
　　 function keyDown(e)  
變量e表示發生擊鍵事件，尋找是哪一個鍵被按下，要使用which這個屬性：  
　　 e.which  
e.which將給出該鍵的索引值，把索引值轉化成該鍵的字母或數字值的方法須要用到靜態函數String.fromCharCode()，以下：  
　　 String.fromCharCode(e.which)  
把上面的語句放在一塊兒，咱們能夠在FireFox中獲得被按下的是哪個鍵：  
　　 function keyDown(e) {  
　　   　　  var keycode = e.which;  
　　 　　    var realkey = String.fromCharCode(e.which);  
　　 　　    alert("按鍵碼: " + keycode + " 字符: " + realkey);  
　　    }
　　   document.onkeydown = keyDown;

三、IE的實現方法
IE的程序不須要e變量，用window.event.keyCode來代替e.which，把鍵的索引值轉化爲真實鍵值方法相似：String.fromCharCode(event.keyCode)，程序以下： 
　　     function keyDown() {  
　　 　　      var keycode = event.keyCode;  
　　 　　      var realkey = String.fromCharCode(event.keyCode);  
　　   　　    alert("按鍵碼: " + keycode + " 字符: " + realkey);  
　　     }  
　　     document.onkeydown = keyDown;

四、判斷瀏覽器類型
上面瞭解了在各類瀏覽器裏是如何實現獲取按鍵事件對象的方法，那麼下面須要判斷瀏覽器類型，這個方法不少，有比較方便理解的，也有很巧妙的辦法，先說通常的方法：就是利用navigator對象的appName屬性，固然也能夠用userAgent屬性，這裏用appName來實現判斷瀏覽器類型，IE和Maxthon的appName是「Microsoft Internet Explorer」 ,而FireFox和Opera的appName是「Netscape」，因此一個功能比較簡單的代碼以下：
　　     function keyUp(e) {  
　　     　　 if(navigator.appName == "Microsoft Internet Explorer")
　　      　　 {
　　      　　    　　var keycode = event.keyCode;  
　　      　　    　　var realkey = String.fromCharCode(event.keyCode);  
　　     　　    }
                        else{
　　     　　   　　  var keycode = e.which;  
　　     　　 　 　   var realkey = String.fromCharCode(e.which);  
　　    　　    }
　　    　　   alert("按鍵碼: " + keycode + " 字符: " + realkey);
　　   　}
　　      document.onkeyup = keyUp;
比較簡潔的方法是：
　　      function keyUp(e) {
　　       　  var currKey=0,e=e||event;
　　      　   currKey=e.keyCode||e.which||e.charCode;
　　      　　var keyName = String.fromCharCode(currKey);
　　       　  alert("按鍵碼: " + currKey + " 字符: " + keyName);
　　       }
　　       document.onkeyup = keyUp;

上面這種方法比較巧妙，簡單地解釋一下：

• 首先，e=e||event;這句代碼是爲了進行瀏覽器事件對象獲取的兼容。js中這句代碼的意思是，若是在FireFox或Opera中，隱藏的變量e是存在的，那麼e||event返回e，若是在IE中，隱藏變量e是不存在，則返回event。
• 其次，currKey=e.keyCode||e.which||e.charCode;這句是爲了兼容瀏覽器按鍵事件對象的按鍵碼屬性（詳見第三部分），如IE中，只有keyCode屬性，而FireFox中有which和charCode屬性，Opera中有keyCode和which屬性等。

上述代碼只是兼容了瀏覽器，獲取了keyup事件對象，簡單的彈出了按鍵碼和按鍵的字符，可是問題出現了，當你按鍵時，字符鍵都是大寫的，而按shift鍵時，顯示的字符很奇怪，因此就須要優化一下代碼了。