jQuery 기반 키보드 이벤트 수신 제어 소개(코드 예)-JS 튜토리얼-php.cn

이 글은 jQuery 기반 키보드 이벤트 수신 제어(코드 예제)에 대한 소개를 제공합니다. 이는 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

최근 프로젝트에서 작업 취소, 다시 실행, 이동, 확대/축소 등의 작업을 수행하기 위해 키보드 이벤트를 모니터링해야 했기 때문에 키보드 이벤트 모니터링 컨트롤을 구현했습니다. 그 기간 동안 정리해서 모두에게 도움이 되길 바라며, 전문가들의 조언도 좀 듣고 싶습니다.

1. 자동으로 포커스를 얻습니다

브라우저의 키보드 이벤트는 포커스를 얻을 수 있는 요소와 일반적으로 수신해야 하는

요소에 의해서만 모니터링되도록 설정할 수 있는 것 같습니다. 이벤트는 포커스를 얻을 수 없으므로 포커스를 얻을 수 있도록 대상 요소의 일부 속성을 수정해야 합니다. 또 다른 가능한 방법은 이벤트를과 같은 태그에 위임하는 것입니다. 여기서는 첫 번째 유형의 메소드가 사용됩니다. 물론 수정할 수 있는 속성이 두 개 이상 있습니다. 예를 들어

태그의 경우 "editable" 속성을 true로 설정할 수 있습니다. tabindex 값을 설정하는 것입니다. 코드는 다음과 같습니다.

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

로그인 후 복사

또한 포커스 이벤트가 발생하려면 요소를 클릭하거나 TAB 전환이 필요하므로 이는 인간의 직관에 맞지 않으므로 마우스 이동 이벤트를 모니터링해야 합니다. 대상 요소가 "자동으로" 포커스를 얻을 수 있음:

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

로그인 후 복사

2. 키보드 이벤트 듣기

프로젝트에 고객이 사용하는 브라우저는 주로 크롬(실제로는 36x 브라우저)이므로 브라우저에 대한 조정이 이루어지지 않습니다. jQuery 이벤트 모니터링만 사용됩니다.

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

로그인 후 복사

Due to 구현은 제어 지향적이므로 개인 메서드 _keyDownHandler가 키보드 동작에 응답하도록 정의됩니다.

3. 키 이벤트 스크리닝

jQuery 이벤트 리스너가 반환하는 이벤트 개체 정보는 상대적으로 크기 때문에 스크리닝이 필요합니다. 이를 위해 키 누름을 처리하기 위한 전용 메서드 _keyCodeProcess가 정의됩니다. ctrl, Shift 및 Alt 버튼의 다양한 조합을 저장하는 객체와 유사한 조회 테이블입니다. 각 조합은 이벤트 발생 후 여기에서 키 코드에 따라 사용자 정의 이벤트 유형 문자열을 저장합니다. 물론 커스텀 이벤트에 해당할 경우에는 빈 문자열이 정직하게 반환됩니다.

4. 이벤트 배포

_keyCodeProcess 메소드는 이벤트에서 이벤트 유형을 추출합니다. 우리는 미리 조회 테이블 콜백에 수신 콜백 함수를 저장하고 키 이름을 사용자 정의 이벤트 문자열로 "교묘하게" 추가합니다. " 접두사를 앞에 붙여 호출하기 쉽게 만듭니다. 앞서 언급한 _keyDownHandler는 다음과 같은 목적으로 설계되었습니다:

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

로그인 후 복사

5. 이벤트 구독 및 구독 취소

앞서 언급한 것처럼 적시에 콜백 함수를 저장하므로 "subscription" " 인터페이스는 개발자가 콜백 함수를 객체 인스턴스에 쉽게 저장할 수 있도록 외부 세계에 노출되어야 합니다. 이를 위해 .bind 인터페이스를 정의했습니다.

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

로그인 후 복사

사람이 사용하기 위한 것이기 때문에 예, 그래서 타입을 했습니다. 그런데 확인해보세요.

인터페이스의 "대칭"에 따르면 구독 및 구독 취소가 가장 좋으므로 단 한 줄의 코드로 .unbind 인터페이스가 정의되고 구현은 다음과 같습니다.

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

로그인 후 복사

6 사용자 정의 이벤트 유형을 확장합니다.

키보드 이벤트의 조합은 풍부하고 다채롭습니다. 모두 컨트롤에 내장되어 있다면 매우 비대해질 것이므로 몇 가지 일반적인 키 조합 외에도 개발자는 .extendEventType을 통해 키 조합과 반환된 문자열을 사용자 정의할 수 있습니다. 메소드:

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

로그인 후 복사

그 중 _setKeyComposition은 사용자 정의 키보드 이벤트를 작성하는 데 사용되는 비공개 메소드입니다.

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

로그인 후 복사

[관련 권장 사항:

jQuery 동영상 튜토리얼

]

위 내용은 jQuery 기반 키보드 이벤트 수신 제어 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!