如何在纯javascript中手动触发按键事件时设置键码值？

Question

我对 Javascript 很陌生，尽管我已经很好地使用了 JQuery。但我找不到更好的文档来执行此操作。仅当我按 Enter 键时才需要触发单击事件。所以我需要为这个场景编写测试用例。

function btnRepeatKeyDownEvent(e){
        if (e.keyCode === 13) {
            this.trigger('click', e);
        }
}

到目前为止我已经找到了这个解决方案。

let keyboardEvent: KeyboardEvent = new KeyboardEvent('keypress', {'key': 'Enter'});
document.dispatchEvent(keyboardEvent);

但上面的代码总是给出 keycode 值为 0。我更厌倦寻找解决方案。根据 MDN，大多数功能已被弃用。我需要使这个测试用例在 chrome、firefox 和 IE11+ 中可用，但不适用于旧浏览器。请帮助我。

Answer 1

keyCode 和其他属性是只读的。因此，您可以利用 JavaScript 的 Object.defineProperties函数来伪造它，该函数会覆盖值：

function makeKeyPressEvent(keyName, keyCode, charCode){
    var event = new KeyboardEvent('keypress');
    Object.defineProperties(event, {
        charCode: {value: charCode},
        keyCode: {value: keyCode},
        keyIdentifier: {value: keyName},
        which: {value: keyCode}
    });
    return event;
}

以下是如何使用它：

window.addEventListener('keypress', function(event){console.log('key pressed!', event.keyIdentifier, event.keyCode, event.charCode, event)}, true);

var enterKeyEvent = makeKeyPressEvent('Enter', 13, 13);

window.dispatchEvent(enterKeyEvent);