jQuery 기반 키보드 이벤트 감청 컨트롤

태그 에 대해 서 는'editable'속성 을 true 로 설정 할 수 있 고 여기 서 사용 하 는 것 은 tabindex 값 을 설정 하 는 것 입 니 다.코드 는 다음 과 같 습 니 다:$ele.attr('tabindex', 1);또한 초점 이벤트 의 트리거 는 요소 나 TAB 를 클릭 하여 전환 해 야 합 니 다.이것 은 인간 의 직관 에 부합 되 지 않 기 때문에 마우스 가 이 벤트 를 감청 하여 목표 요소 가'자동'으로 초점 을 얻 도록 해 야 합 니 다.

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

2.키보드 사건 감청
프로젝트 대상 클 라 이언 트 가 사용 하 는 브 라 우 저 는 chrome 을 위주 로 하기 때문에 브 라 우 저 에 적합 하지 않 고 jQuery 의 이벤트 감청 만 사용 합 니 다.

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

실현 은 컨트롤 화 되 어 있 기 때문에 개인 적 인 방법 을 정 의 했 습 니 다키 다운 핸들 러 가 키보드 동작 에 응답 합 니 다.
3.버튼 이벤트 선별
jQuery 이벤트 모니터 가 되 돌아 오 는 이벤트 대상 정보 가 많 기 때문에 선별 이 필요 합 니 다.이 를 위해 개인 적 인 방법 을 정 의 했 습 니 다키 코드 프로 세 스 가 버튼 을 처리 합 니 다.

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
  };

이 키 타 입 set 는 탐색 표 와 유사 한 대상 입 니 다.ctrl,shift,alt 단추 의 다양한 유형 조합 이 저 장 됩 니 다.각 조합 에 서 는 버튼 코드 에 따라 사용자 정의 이벤트 형식 문자열 을 저장 합 니 다.이벤트 가 발생 한 후에 이 문자열 을 되 돌려 줍 니 다.물론 사용자 정의 이벤트 가 없 을 때 는 빈 문자열 을 성실 하 게 되 돌려 줍 니 다.
4.사건 배포
_keyCodeProcess 방법 은 이벤트 에서 이벤트 형식 을 추출 합 니 다.우 리 는 미리 감청 한 리 셋 함 수 를 검색 표 callback 에 저장 하고 키 이름 을 사용자 정의 이벤트 문자열 앞 에'on'접 두 사 를 추가 하면 편리 하 게 호출 할 수 있 습 니 다.앞에서 말 한키 다운 핸들 러 는 바로 이 를 위해 설계 되 었 습 니 다.

function _keyDownHandler(e){
    var strCommand = this._keyCodeProcess(e);
    var objEvent = {
      type: '',
      originEvent: e.originEvent
    };
    strCommand && this.callback['on' + strCommand](objEvent);
    return null;
  };

5.이벤트 구독 및 구독 해제
앞에서 말 했 듯 이 우 리 는 리 셋 함 수 를 적당 한 시기 에 호출 했 기 때문에 대외 적 으로'구독'인 터 페 이 스 를 노출 시 켜 개발 자가 자신의 리 셋 함 수 를 대상 인 스 턴 스 에 편리 하 게 저장 할 수 있 도록 해 야 합 니 다.이 를 위해 저 는'bid 인터페이스'를 정 의 했 습 니 다.

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;
  };

다른 사람 에 게 쓰 는 것 이기 때문에,아울러 유형 검 사 를 하 였 다.
인터페이스의'대칭 성'에 따라 구독 이 있 으 면 구독 을 해제 하 는 것 이 가장 좋 습 니 다.따라서'unbid 인터페이스'를 정 의 했 습 니 다.코드 만 있 고 다음 과 같 습 니 다.

function unbind(type){
    this.callback['on' + type] = this._emptyEventHandler;
    return this;
  };

6.사용자 정의 이벤트 형식 확장
키보드 이벤트 의 조합 이 다양 합 니 다.컨트롤 에 모두 내장 되 어 있 으 면 비대 해 집 니 다.따라서 몇 개의 흔 한 조합 키 를 제외 하고 개발 자 는'extendeEventType 방법'을 통 해 조합 키 와 되 돌아 오 는 문자열 을 정의 할 수 있 습 니 다.

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<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     ，              
   * @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 를 바탕 으로 키보드 사건 감청 컨트롤 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 님 은 신속하게 답 해 드 리 겠 습 니 다!