如何为键盘事件定义 keyCode 或 which 或 key 或 code 属性

Question

根据我的要求，我们需要为热键编写测试规范（比如 shift+1+L -- 上传文件）。在我的方法中，我写了如下内容

    public static SHIFTKEY      : number = 16;
    this.keys = {};

    document.addEventListener('keydown', (event: KeyboardEvent) => {
    var code = event.which ? event.which : event.keyCode;
    if (code === KeyCodeConst.SHIFTKEY || (this.keys[KeyCodeConst.SHIFTKEY] && trackedKeys[code])) {
    if (!this.keys[code]) {
    this.keys[code] = true;
    this.keysCount++;
    }
    if (this.keysCount === 3) {
        alert('call the method which is required');
    }
    }
    if (!trackedKeys[code]) {
    this.keysCount = 0;
    }
    });

现在在我的规范文件中，我正在尝试为此编写一个测试用例，如下所示

      describe('Add Event Listener', () => {
           beforeEach(() => {
               viewModel = new viewModel();
               spyOn(window, 'addEventListener').and.callThrough();
           });
           it('check the combination of keys are called', () => {
               keyPress(16);
               keyPress(49);
               keyPress(76);
               expect(viewModel.keys[KeyCodeConst.SHIFTKEY]).toBeTruthy();          
           });
           function keyPress(keyCodeVal) {
               var keyboardEvent = document.createEvent('KeyboardEvent');
               try {
                   Object.defineProperty(keyboardEvent, 'keyCode', {'value': keyCodeVal});
               } catch (err){
                   console.log(err);
               }
               keyboardEvent.initKeyboardEvent('keydown',true,false,window,'',0,'',false,'');
               document.body.dispatchEvent(keyboardEvent);
           }
       });

在运行构建时，我收到如下所示的错误，它给出了如下所示的构建错误

    Attempting to change value of a readonly property.
    at defineProperty (--some url--)
    at keyPress (--some url--)

除了 keyCode 或 which.根据 MDN 指南，我观察到这些是只读属性。我尝试使用 key 但它没有用。

Answer 1

要在不实际触发 keydown 事件的情况下测试您的方法，您可以将获取按下的键的逻辑从您的函数中分离出来，并在您的测试中将您想要测试的按下的键代码提供给它。

要实际测试 keydown 事件，请尝试此函数，该函数采用将 keydown 事件分派到的元素和 keyCode 值（调整为 phantom-js）：

    function triggerKeyDown(element, value) {
        var e = document.createEvent('KeyboardEvent');
        e.initEvent('keydown', true, false);
        Object.defineProperty(e, 'keyCode', {'value': value});
        element.dispatchEvent(e);
    }

如何为键盘事件定义 keyCode 或 which 或 key 或 code 属性

how to define keyCode or which or key or code properties for keyboard event

javascript

typescript

jasmine

phantomjs

node-modules