基于 jQuery 實現(xiàn)鍵盤事件監(jiān)聽控件
更新時間：2019年04月04日 16:14:14 作者：madRain
這篇文章主要介紹了基于 jQuery 的鍵盤事件監(jiān)聽控件,需要的朋友可以參考下
最近項目里要做一個畫板，需要對鍵盤事件進行監(jiān)聽，來進行諸如撤回、重做、移動、縮放等操作，因此順手實現(xiàn)了一個鍵盤事件監(jiān)聽控件，期間略有收獲，整理出來，希望對大家有所幫助，更希望能獲得高手的指點。
1. 自動獲取焦點
似乎瀏覽器的鍵盤事件只能被那些可以獲得焦點的元素設(shè)置監(jiān)聽，而通常需要監(jiān)聽事件的 <DIV>、<CANVAS> 元素都不能獲得焦點，因此需要修改目標元素的某些屬性使其可以獲得焦點，另外一種可行的方法是將事件委托給諸如 <INPUT> 標簽。這里采用的是第一類方法，當然，可以修改的屬性也不止一種，例如，對于 <DIV> 標簽可以將其 “editable” 屬性設(shè)為 true，而這里采用的是給其設(shè)一個 tabindex 值。代碼如下：
$ele.attr('tabindex', 1);
另外，焦點事件的觸發(fā)需要點擊元素或者 TAB 切換，而這并不符合人類的直覺，因此需要監(jiān)聽鼠標移入事件，使目標元素“自動”地獲得焦點：
$ele.on('mouseenter', function(){
$ele.focus();
});
2. 監(jiān)聽鍵盤事件
由于項目面向的客戶所使用的瀏覽器以chrome為主(實際上是36x瀏覽器)，因此沒有針對瀏覽器做任何適配，僅僅使用了 jQuery的事件監(jiān)聽：
$ele.on('keydown', this._keyDownHandler.bind(this));
由于實現(xiàn)是控件化的，所以定義了一個私有方法 _keyDownHandler 來響應鍵盤的動作。
3. 按鍵事件甄別
jQuery事件監(jiān)聽器返回的事件對象信息較多，因此需要進行甄別，為此定義了一個私有方法 _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按鈕的各種類型組合，每種組合下又分別按照按鍵碼存儲一個自定義事件類型字符串，事件發(fā)生之后會從這里返回這個字符串，當然，沒有對應自定義事件的時候，就老老實實地返回空字符串。
4. 事件分發(fā)
_keyCodeProcess 方法從事件中提取出了事件類型，我們提前將監(jiān)聽的回調(diào)函數(shù)存儲在一個查找表 callback 中，并且“巧妙”地使得其鍵名剛好為自定義事件字符串前面加個“on”前綴，就可以方便地調(diào)用了，前述 _keyDownHandler 正是為此而設(shè)計的：
function _keyDownHandler(e){
var strCommand = this._keyCodeProcess(e);
var objEvent = {
type: '',
originEvent: e.originEvent
};
strCommand && this.callback['on' + strCommand](objEvent);
return null;
};
5. 事件訂閱與解除訂閱
前面說了，我們是把回調(diào)函數(shù)存儲起來適時調(diào)用的，因此需要對外暴露一個“訂閱”接口，讓開發(fā)者可以方便地把自己的回調(diào)函數(shù)存儲到對象實例中去，為此，我定義了一個 .bind接口：
function bind(type, callback, description){
var allType = this.allEventType;
if(allType.indexOf(type) === -1){
throwError('不支持改事件類型，請先擴展該類型，或采用其他事件類型');
}
if(!(callback instanceof Function)){
throwError('綁定的事件處理回調(diào)必須是函數(shù)類型');
}
this.callback['on' + type] = callback;
this.eventDiscibeSet[type] = description || '沒有該事件的描述';
return this;
};
由于是給人用的，所以順帶做了下類型檢查。
根據(jù)接口的“對稱性”，有訂閱最好也有解除訂閱，因此定義了 .unbind接口，只有一句代碼，實現(xiàn)如下：
function unbind(type){
this.callback['on' + type] = this._emptyEventHandler;
return this;
};
6.擴展自定義事件類型
鍵盤事件的組合豐富多彩，如果全部內(nèi)置在控件中的話，會是很臃腫的，因此除了少數(shù)幾個常見的組合鍵之外，開發(fā)者可以通過 .extendEventType 方法，來自定義組合鍵和返回的字符串：
function extendEventType(config){
var len = 0;
if(config instanceof Array){
len = config.length;
while(len--){
this._setKeyComposition(config[len]);
}
} else {
this._setKeyComposition(config);
}
return this;
};
其中的 ._setKeyComposition 是一個私有方法，用來寫入自定義鍵盤事件的方法：
_setKeyComposition(config){
var altKey = config.alt;
var ctrlKey = config.ctrl;
var shiftKey = config.shift;
var threeKey = altKey && ctrlKey && shiftKey;
var ctrlAlt = altKey && ctrlKey;
var altShift = altKey && shiftKey;
var ctrlShift = shiftKey && ctrlKey;
var code = config.code + '';
if(threeKey){
this.keyTypeSet.threeKey[code] = config.type;
} else if(ctrlAlt) {
this.keyTypeSet.ctrlAlt[code] = config.type;
} else if(ctrlShift) {
this.keyTypeSet.ctrlShift[code] = config.type;
} else if(altShift) {
this.keyTypeSet.altShift[code] = config.type;
} else if(altKey) {
this.keyTypeSet.altKey[code] = config.type;
} else if(ctrlKey) {
this.keyTypeSet.ctrlKey[code] = config.type;
} else if(shiftKey) {
this.keyTypeSet.shiftKey[code] = config.type;
} else {
this.keyTypeSet.singleKey[code] = config.type;
}
return null;
};
這樣，一個鍵盤事件監(jiān)聽控件就大功告成了，下面是完整實現(xiàn)代碼：
/**
* @constructor 鍵盤事件監(jiān)聽器
* */
function KeyboardListener(param){
this._init(param);
}
!function(){
/**
* @private {String} param.ele 事件對象選擇器
* */
KeyboardListener.prototype._init = function _init(param){
this.$ele = $(param.ele);
this._initEvents();
this._initEventType();
return null;
};
/**
* @private _emptyEventHandler 空白事件響應
* */
KeyboardListener.prototype._emptyEventHandler = function _emptyEventHandler(){
return null;
};
/**
* @private _initEventType 初始化所有初始自定義事件類型
* */
KeyboardListener.prototype._initEventType = function _initEventType(){
var allType = ['up', 'down', 'left', 'right', 'undo', 'redo', 'zoomIn', 'zoomOut', 'delete'];
var intLen = allType.length;
this.allEventType = allType;
this.callback = {};
this.eventDiscibeSet = {};
for(var intCnt = 0; intCnt < intLen; intCnt++){
this.callback['on' + allType[intCnt]] = KeyboardListener.prototype._emptyEventHandler;
}
return null;
};
/**
* @private _initEvents 綁定 DOM 事件
* */
KeyboardListener.prototype._initEvents = function _initEvents(){
var $ele = this.$ele;
$ele.attr('tabindex', 1);
$ele.on('mouseenter', function(){
$ele.focus();
});
$ele.on('keydown', this._keyDownHandler.bind(this));
this.keyTypeSet = {
altKey: {},
ctrlAlt: {},
ctrlKey: {},
threeKey: {},
altShift: {},
shiftKey: {},
ctrlShift: {},
singleKey: {}
};
// 支持一些內(nèi)建的鍵盤事件類型
this.extendEventType([
{
type: 'redo',
ctrl: true,
shift: true,
code: 90
},
{
type: 'undo',
ctrl: true,
code: 90
},
{
type: 'copy',
ctrl: true,
code: 67
},
{
type: 'paste',
ctrl: true,
code: 86
},
{
type: 'delete',
code: 46
},
{
type: 'right',
code: 39
},
{
type: 'down',
code: 40
},
{
type: 'left',
code: 37
},
{
type: 'up',
code: 38
}
]);
return null;
};
/**
* @private _keyDownHandler 自定義鍵盤事件分發(fā)
* */
KeyboardListener.prototype._keyDownHandler = function _keyDownHandler(e){
var strCommand = this._keyCodeProcess(e);
var objEvent = {
type: '',
originEvent: e.originEvent
};
strCommand && this.callback['on' + strCommand](objEvent);
return null;
};
/**
* @private _keyCodeProcess 處理按鍵碼
* */
KeyboardListener.prototype._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
};
/**
* @private _setKeyComposition 自定義鍵盤事件
* @param {Object} config 鍵盤事件配置方案
* @param {String} config.type 自定義事件類型
* @param {keyCode} config.code 按鍵的碼值
* @param {Boolean} [config.ctrl] 是否與 Ctrl 形成組合鍵
* @param {Boolean} [config.alt] 是否與 Alt 形成組合鍵
* @param {Boolean} [config.shift] 是否與 Shift 形成組合鍵
* */
KeyboardListener.prototype._setKeyComposition = function _setKeyComposition(config){
var altKey = config.alt;
var ctrlKey = config.ctrl;
var shiftKey = config.shift;
var threeKey = altKey && ctrlKey && shiftKey;
var ctrlAlt = altKey && ctrlKey;
var altShift = altKey && shiftKey;
var ctrlShift = shiftKey && ctrlKey;
var code = config.code + '';
if(threeKey){
this.keyTypeSet.threeKey[code] = config.type;
} else if(ctrlAlt) {
this.keyTypeSet.ctrlAlt[code] = config.type;
} else if(ctrlShift) {
this.keyTypeSet.ctrlShift[code] = config.type;
} else if(altShift) {
this.keyTypeSet.altShift[code] = config.type;
} else if(altKey) {
this.keyTypeSet.altKey[code] = config.type;
} else if(ctrlKey) {
this.keyTypeSet.ctrlKey[code] = config.type;
} else if(shiftKey) {
this.keyTypeSet.shiftKey[code] = config.type;
} else {
this.keyTypeSet.singleKey[code] = config.type;
}
return null;
};
/**
* @method extendEventType 擴展鍵盤事件類型
* @param {Object|Array<object>} config 鍵盤事件配置方案
* @param {String} config.type 自定義事件類型
* @param {keyCode} config.code 按鍵的碼值
* @param {Boolean} [config.ctrl] 是否與 Ctrl 形成組合鍵
* @param {Boolean} [config.alt] 是否與 Alt 形成組合鍵
* @param {Boolean} [config.shift] 是否與 Shift 形成組合鍵
* */
KeyboardListener.prototype.extendEventType = function extendEventType(config){
var len = 0;
if(config instanceof Array){
len = config.length;
while(len--){
this._setKeyComposition(config[len]);
}
} else {
this._setKeyComposition(config);
}
return this;
};
/**
* @method bind 綁定自定義的鍵盤事件
* @param {String} type 事件類型 如：['up', 'down', 'left', 'right', 'undo', 'redo', 'delete', zoomIn, 'zoomOut']
* @param {Function} callback 回調(diào)函數(shù)，參數(shù)為一個自定義的仿事件對象
* @param {String} description 對綁定事件的用途進行說明
* */
KeyboardListener.prototype.bind = function bind(type, callback, description){
var allType = this.allEventType;
if(allType.indexOf(type) === -1){
throwError('不支持改事件類型，請先擴展該類型，或采用其他事件類型');
}
if(!(callback instanceof Function)){
throwError('綁定的事件處理回調(diào)必須是函數(shù)類型');
}
this.callback['on' + type] = callback;
this.eventDiscibeSet[type] = description || '沒有該事件的描述';
return this;
};
/**
* @method unbind 解除事件綁定
* @param {String} type 事件類型
* */
KeyboardListener.prototype.unbind = function unbind(type){
this.callback['on' + type] = this._emptyEventHandler;
return this;
};
}();
總結(jié)
以上所述是小編給大家介紹的基于 jQuery 實現(xiàn)鍵盤事件監(jiān)聽控件，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關(guān)文章
jquery.tableSort.js表格排序插件使用方法詳解
這篇文章主要為大家詳細介紹了jquery.tableSort.js表格排序插件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
jquery1.10去除了.live()方法，新增了一個.on()方法來給元素綁定事件，下面有個不錯的示例，大家可以參考下2014-03-03
ashx文件獲取$.ajax()方法發(fā)送的數(shù)據(jù)
這篇文章主要介紹了ashx文件獲取$.ajax()方法發(fā)送的數(shù)據(jù)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-05-05
jQuery實現(xiàn)按鈕只點擊一次后就取消點擊事件綁定的方法
這篇文章主要介紹了jQuery實現(xiàn)按鈕只點擊一次后就取消點擊事件綁定的方法,可實現(xiàn)點擊按鈕后取消onclick事件綁定的功能,需要的朋友可以參考下2015-06-06
如何想讓頁面上兩個div中的滾動條(滑塊)同步運動該怎實現(xiàn)，具體代碼如下，感興趣的朋友可以參考下2013-08-08
這篇文章主要給大家介紹了利用jQuery實現(xiàn)一個簡單的表格上下翻頁效果的相關(guān)資料，文中介紹的很詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-03-03
這篇文章主要介紹了jQuery解析json格式數(shù)據(jù)的方法,結(jié)合實例分析了使用jQuery1.7.2版本的方法解析json格式數(shù)據(jù)的技巧,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了15個常用的jquery代碼片段，對大家學習jquery程序設(shè)計有所幫助,需要的朋友可以參考下2015-12-12
基于Jquery實現(xiàn)仿百度百科右側(cè)導航代碼附源碼下載
本篇文章給大家介紹基于jquery實現(xiàn)仿百度百科右側(cè)導航代碼附源碼下載，對百度百科右側(cè)導航代碼相關(guān)內(nèi)容感興趣的朋友可以參考下本文2015-11-11
這篇文章主要介紹了JQ技術(shù)實現(xiàn)注冊頁面帶有校驗密碼強度,需要的朋友可以參考下2015-07-07