最近項目里要做一個畫板，需要對鍵盤事件進行監聽，來進行諸如撤回、重做、移動、縮放等操作，因此順手實現了一個鍵盤事件監聽控件，期間略有收獲，整理出來，希望對大家有所幫助，更希望能獲得高手的指點。

1. 自動獲取焦點

似乎瀏覽器的鍵盤事件只能被那些可以獲得焦點的元素設置監聽，而通常需要監聽事件的 <DIV>、<CANVAS> 元素都不能獲得焦點，因此需要修改目標元素的某些屬性使其可以獲得焦點，另外一種可行的方法是將事件委托給諸如 <INPUT> 標簽。這里采用的是第一類方法，當然，可以修改的屬性也不止一種，例如，對于 <DIV> 標簽可以將其 “editable” 屬性設為 true，而這里采用的是給其設一個 tabindex 值。代碼如下：

$ele.attr('tabindex', 1);

另外，焦點事件的觸發需要點擊元素或者 TAB 切換，而這并不符合人類的直覺，因此需要監聽鼠標移入事件，使目標元素“自動”地獲得焦點：

$ele.on('mouseenter', function(){  $ele.focus();});

2. 監聽鍵盤事件

由于項目面向的客戶所使用的瀏覽器以chrome為主(實際上是36x瀏覽器)，因此沒有針對瀏覽器做任何適配，僅僅使用了 jQuery的事件監聽：

$ele.on('keydown', this._keyDownHandler.bind(this));

由于實現是控件化的，所以定義了一個私有方法 _keyDownHandler 來響應鍵盤的動作。

3. 按鍵事件甄別

jQuery事件監聽器返回的事件對象信息較多，因此需要進行甄別，為此定義了一個私有方法 _keyCodeProcess 來處理按鍵

function _keyCodeProcess(e){    var code = e.keyCode + '';    var altKey = e.altKey;    var ctrlKey = e.ctrlKey;    var shiftKey = e.shiftKey;    var threeKey = altKey && ctrlKey && shiftKey;    var ctrlAlt = altKey && ctrlKey;    var altShift = altKey && shiftKey;    var ctrlShift = shiftKey && ctrlKey;    var keyTypeSet = this.keyTypeSet;    var resStr = '';    if(threeKey){      resStr = keyTypeSet.threeKey[code];    } else if(ctrlAlt) {      resStr = keyTypeSet.ctrlAlt[code];    } else if(ctrlShift) {      resStr = keyTypeSet.ctrlShift[code];    } else if(altShift) {      resStr = keyTypeSet.altShift[code];    } else if(altKey) {      resStr = keyTypeSet.altKey[code];    } else if(ctrlKey) {      resStr = keyTypeSet.ctrlKey[code];    } else if(shiftKey) {      resStr = keyTypeSet.shiftKey[code];    } else {      resStr = keyTypeSet.singleKey[code];    }    return resStr  };

這里的 keyTypeSet 是一個類似于查找表的對象，里面存儲了 ctrl、shift、alt按鈕的各種類型組合，每種組合下又分別按照按鍵碼存儲一個自定義事件類型字符串，事件發生之后會從這里返回這個字符串，當然，沒有對應自定義事件的時候，就老老實實地返回空字符串。