成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

使用jQuery怎么實現(xiàn)一個鍵盤事件監(jiān)聽控件

這篇文章將為大家詳細講解有關使用jQuery怎么實現(xiàn)一個鍵盤事件監(jiān)聽控件，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比石峰網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式石峰網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋石峰地區(qū)。費用合理售后完善，10多年實體公司更值得信賴。

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。

1. 自動獲取焦點

似乎瀏覽器的鍵盤事件只能被那些可以獲得焦點的元素設置監(jiān)聽，而通常需要監(jiān)聽事件的 <DIV>、<CANVAS> 元素都不能獲得焦點，因此需要修改目標元素的某些屬性使其可以獲得焦點，另外一種可行的方法是將事件委托給諸如 <INPUT> 標簽。這里采用的是第一類方法，當然，可以修改的屬性也不止一種，例如，對于 <DIV> 標簽可以將其 “editable” 屬性設為 true，而這里采用的是給其設一個 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)聽的回調函數(shù)存儲在一個查找表 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. 事件訂閱與解除訂閱

前面說了，我們是把回調函數(shù)存儲起來適時調用的，因此需要對外暴露一個“訂閱”接口，讓開發(fā)者可以方便地把自己的回調函數(shù)存儲到對象實例中去，為此，我定義了一個 .bind接口：

function bind(type, callback, description){
    var allType = this.allEventType;
    if(allType.indexOf(type) === -1){
      throwError('不支持改事件類型，請先擴展該類型，或采用其他事件類型');
    }
    if(!(callback instanceof Function)){
      throwError('綁定的事件處理回調必須是函數(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.擴展自定義事件類型

鍵盤事件的組合豐富多彩，如果全部內置在控件中的話，會是很臃腫的，因此除了少數(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: {}
    };
    // 支持一些內建的鍵盤事件類型
    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 回調函數(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('綁定的事件處理回調必須是函數(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;
  };
}();

關于使用jQuery怎么實現(xiàn)一個鍵盤事件監(jiān)聽控件就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網(wǎng)站名稱：使用jQuery怎么實現(xiàn)一個鍵盤事件監(jiān)聽控件
本文來源：http://jinyejixie.com/article22/ggsdjc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、服務器托管、電子商務、網(wǎng)站內鏈、標簽優(yōu)化、品牌網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司
区。| 德江县| 资源县| 绍兴市| 大冶市| 清水河县| 余姚市| 德钦县| 蓝田县| 竹北市| 山丹县| 贵德县| 夹江县| 大同市| 永年县| 荔浦县| 五莲县| 洞头县| 安多县| 连江县| 黄大仙区| 漯河市| 柯坪县| 鄂托克前旗| 大安市| 郓城县| 镇康县| 桃园县| 翁牛特旗| 滁州市| 通城县| 澄江县| 南华县| 康马县| 绥德县| 饶平县| 合江县| 尉氏县| 清原| 玉溪市| 新民市|