Einführung in die jQuery-basierte Steuerung des Abhörens von Tastaturereignissen (Codebeispiel)

Dieser Artikel bietet Ihnen eine Einführung in die jQuery-basierte Tastatur-Event-Listening-Steuerung (Codebeispiel). Ich hoffe, dass er Ihnen als Referenz dienen wird.

In einem aktuellen Projekt möchte ich ein Zeichenbrett erstellen, das Tastaturereignisse überwachen muss, um Vorgänge wie Rückgängigmachen, Wiederherstellen, Verschieben, Zoomen usw. auszuführen. Deshalb habe ich eine Steuerung zur Überwachung von Tastaturereignissen implementiert und Ich habe während des Prozesses etwas gewonnen und hoffe, dass es für alle hilfreich sein wird. Ich hoffe, dass ich einige Ratschläge von Experten bekomme.

1. Fokus automatisch erhalten

Es scheint, dass die Tastaturereignisse des Browsers nur so eingerichtet werden können, dass sie auf die Elemente warten, die den Fokus erhalten können, und normalerweise auf Ereignisse warten müssen

, Kein Element kann den Fokus erhalten, daher müssen Sie einige Eigenschaften des Zielelements ändern, damit es den Fokus erhalten kann. Eine andere mögliche Methode besteht darin, das Ereignis an ein Tag wie zu delegieren. Der erste Methodentyp wird hier verwendet. Natürlich gibt es mehr als ein Attribut, das geändert werden kann. Beispielsweise können Sie das Attribut „editierbar“ auf true setzen, aber was hier verwendet wird besteht darin, einen Tabindex-Wert dafür festzulegen. Der Code lautet wie folgt:

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

Darüber hinaus erfordert das Auslösen des Fokusereignisses einen Klick auf das Element oder einen TAB-Wechsel, was nicht der menschlichen Intuition entspricht. Daher ist es notwendig, die Mausbewegung zu überwachen -in-Ereignis, damit das Zielelement „automatisch“ den Fokus erhalten kann:

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

2. Tastaturereignisse abhören

Da der von den Kunden für das Projekt verwendete Browser hauptsächlich Chrome ist (tatsächlich 36x Browser) wurde keine Anpassung am Browser vorgenommen:

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

Da die Implementierung steuerungsorientiert ist, ist eine private Methode _keyDownHandler definiert, um auf Tastaturaktionen zu reagieren.

3. Schlüsselereignis-Überprüfung

Der jQuery-Ereignis-Listener gibt viele Ereignisobjektinformationen zurück und muss daher überprüft werden. Zu diesem Zweck wird eine private Methode _keyCodeProcess definiert, um Tastendrücke zu verarbeiten

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

Das keyTypeSet hier ist ein Objekt ähnlich einer Nachschlagetabelle, das verschiedene Arten von Kombinationen von Strg-, Umschalt- und Alt-Tasten speichert. Unter jeder Kombination wird eine benutzerdefinierte Ereignistypzeichenfolge entsprechend dem Tastencode gespeichert . Wenn ein Ereignis auftritt, wird diese Zeichenfolge später zurückgegeben. Wenn kein entsprechendes benutzerdefiniertes Ereignis vorliegt, wird ehrlicherweise eine leere Zeichenfolge zurückgegeben.

4. Ereignisverteilung

Die Methode _keyCodeProcess extrahiert den Ereignistyp aus dem Ereignis. Wir speichern die Rückruffunktion im Voraus in einer Nachschlagetabelle und machen ihren Schlüssel „geschickt“. Fügt das Präfix „on“ vor der benutzerdefinierten Ereigniszeichenfolge hinzu und kann einfach aufgerufen werden:

function _keyDownHandler(e){
        var strCommand = this._keyCodeProcess(e);

        var objEvent = {
            type: '',
            originEvent: e.originEvent
        };

        strCommand && this.callback['on' + strCommand](objEvent);

        return null;
    };

Anmeldung und Abmeldung von Ereignissen

Wie bereits erwähnt Wir speichern die Rückruffunktion und rufen sie zeitnah auf, daher müssen wir eine „Abonnement“-Schnittstelle für die Außenwelt bereitstellen, damit Entwickler ihre Rückruffunktion problemlos in der Objektinstanz speichern können. Aus diesem Grund habe ich eine definiert. Bind-Schnittstelle:

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

Da es für den menschlichen Gebrauch ist, habe ich übrigens eine Typprüfung durchgeführt.
Entsprechend der „Symmetrie“ der Schnittstelle ist es am besten, sich anzumelden und abzumelden, sodass die .unbind-Schnittstelle mit nur einer Codezeile definiert ist und die Implementierung wie folgt lautet:

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

        return this;
    };

6. Erweitern Sie benutzerdefinierte Ereignistypen

Es gibt umfangreiche und farbenfrohe Kombinationen von Tastaturereignissen. Wenn sie alle in das Steuerelement integriert wären, wäre es für Entwickler zusätzlich zu einigen gängigen Tastenkombinationen sehr aufgeblasen Passen Sie Tastenkombinationen und Rückgaben über die .extendEventType-Methode an. Zeichenfolge:

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

Die ._setKeyComposition ist eine private Methode, die zum Schreiben benutzerdefinierter Tastaturereignisse verwendet wird:

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

Auf diese Weise wird eine Überwachungssteuerung für Tastaturereignisse verwendet ist wie folgt vollständig Ist der vollständige Implementierungscode:

/**
 * @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[&#39;on&#39; + allType[intCnt]] = KeyboardListener.prototype._emptyEventHandler;
        }

        return null;
    };

    /**
     * @private _initEvents 绑定 DOM 事件
     * */
    KeyboardListener.prototype._initEvents = function _initEvents(){
        var $ele = this.$ele;

        $ele.attr(&#39;tabindex&#39;, 1);

        $ele.on(&#39;mouseenter&#39;, function(){
            $ele.focus();
        });

        $ele.on(&#39;keydown&#39;, this._keyDownHandler.bind(this));

        this.keyTypeSet = {
            altKey: {},
            ctrlAlt: {},
            ctrlKey: {},
            threeKey: {},
            altShift: {},
            shiftKey: {},
            ctrlShift: {},
            singleKey: {}
        };

        // 支持一些内建的键盘事件类型
        this.extendEventType([
            {
                type: &#39;redo&#39;,
                ctrl: true,
                shift: true,
                code: 90
            },
            {
                type: &#39;undo&#39;,
                ctrl: true,
                code: 90
            },
            {
                type: &#39;copy&#39;,
                ctrl: true,
                code: 67
            },
            {
                type: &#39;paste&#39;,
                ctrl: true,
                code: 86
            },
            {
                type: &#39;delete&#39;,
                code: 46
            },
            {
                type: &#39;right&#39;,
                code: 39
            },
            {
                type: &#39;down&#39;,
                code: 40
            },
            {
                type: &#39;left&#39;,
                code: 37
            },
            {
                type: &#39;up&#39;,
                code: 38
            }
        ]);

        return null;
    };

    /**
     * @private _keyDownHandler 自定义键盘事件分发
     * */
    KeyboardListener.prototype._keyDownHandler = function _keyDownHandler(e){
        var strCommand = this._keyCodeProcess(e);

        var objEvent = {
            type: &#39;&#39;,
            originEvent: e.originEvent
        };

        strCommand && this.callback[&#39;on&#39; + strCommand](objEvent);

        return null;
    };

    /**
     * @private _keyCodeProcess 处理按键码
     * */
    KeyboardListener.prototype._keyCodeProcess = function _keyCodeProcess(e){
        var code = e.keyCode + &#39;&#39;;
        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 = &#39;&#39;;

        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 + &#39;&#39;;

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

[Verwandte Empfehlungen: jQuery-Video-Tutorial]

Das obige ist der detaillierte Inhalt vonEinführung in die jQuery-basierte Steuerung des Abhörens von Tastaturereignissen (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!