這篇文章帶給大家的內容是關於基於 jQuery的鍵盤事件監聽控制的介紹(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。 最近專案裡要做一個畫板,需要對鍵盤事件進行監聽,來進行諸如撤回、重做、移動、縮放等操作,因此順手實現了一個鍵盤事件監聽控件,期間略有收穫,整理出來,希望對大家有幫助,更希望能獲得高手的指點。 1. 自動取得焦點 似乎瀏覽器的鍵盤事件只能被那些可以獲得焦點的元素設定監聽,而通常需要監聽事件的、元素都無法獲得焦點,因此需要修改目標元素的某些屬性使其可以獲得焦點,另外一種可行的方法是將事件委託給諸如 標籤。這裡採用的是第一類方法,當然,可以修改的屬性也不只一種,例如,對於 標籤可以將其「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按鈕的各種類型組合,每種組合下又分別按照按鍵碼儲存一個自訂事件類型字串,事件發生之後會從這裡回傳這個字串,當然,沒有對應自訂事件的時候,就老老實實地回傳空字串。 4. 事件分發 _keyCodeProcess 方法從事件中提取出了事件類型,我們提前將監聽的回調函數儲存在一個查找表callback 中,並且「巧妙」地使得其鍵名剛好為自訂事件字串前面加個「on」前綴,就可以方便地呼叫了,前述_keyDownHandler 正是為此而設計的: function _keyDownHandler(e){ var strCommand = this._keyCodeProcess(e); var objEvent = { type: '', originEvent: e.originEvent }; strCommand && this.callback['on' + strCommand](objEvent); return null; };登入後複製 5. 事件訂閱與解除訂閱 前面說了,我們是把回調函數存儲起來適時調用的,因此需要對外暴露一個“訂閱”接口,讓開發者可以方便地把自己的回調函數存儲到對象實例中去,為此,我定義了一個.bind介面: function bind(type, callback, description){ var allType = this.allEventType; if(allType.indexOf(type) === -1){ throwError('不支持改事件类型,请先扩展该类型,或采用其他事件类型'); } if(!(callback instanceof Function)){ throwError('绑定的事件处理回调必须是函数类型'); } this.callback['on' + type] = callback; this.eventDiscibeSet[type] = description || '没有该事件的描述'; return this; };登入後複製 由於是給人用的,所以順帶做了下類型檢查。 根據接口的“對稱性”,有訂閱最好也有解除訂閱,因此定義了.unbind接口,只有一句代碼,實現如下: function unbind(type){ this.callback['on' + type] = this._emptyEventHandler; return this; };登入後複製 6.擴展自定義事件類型 鍵盤事件的組合豐富多彩,如果全部內置在控件中的話,會是很臃腫的,因此除了少數幾個常見的組合鍵之外,開發者可以通過.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; };登入後複製 這樣,一個鍵盤事件監聽控制就大功告成了,下面是完整實作程式碼: /** * @constructor 键盘事件监听器 * */ 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: {} }; // 支持一些内建的键盘事件类型 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 自定义键盘事件分发 * */ 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} 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 回调函数,参数为一个自定义的仿事件对象 * @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('绑定的事件处理回调必须是函数类型'); } 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; }; }();登入後複製 【相關推薦:jQuery影片教學】