jQuery 기반 키보드 이벤트 수신 제어 소개(코드 예)

이 글은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!