HumanBenchmark打字测试：自定义KeyboardEvent无效但重放捕获事件可行

我在HumanBenchmark的打字测试中尝试刷最高分，遇到一个问题：只有重放捕获到的真实用户键盘事件才能让测试正常响应，自己构造的KeyboardEvent完全没用。而且两种场景下事件的isTrusted标记都是false，说明网站并没有校验这个属性，搞不懂自定义事件失效的原因。

可运行的事件重放代码 #

let vTarget = document.getElementsByClassName("letters")[0]
let vKeyEvents = {}
document.addEventListener("keydown", 
    function(e){
        vKeyEvents[e.key] = e
    }
);

function run(){
    vText = vTarget.innerText
    for (let index = 0; index < vText.length; index++) {
        vTarget.dispatchEvent(vKeyEvents[vText[index]])
    }
}

代码运行步骤 #

• 打开HumanBenchmark打字测试页面
• 把上述代码粘贴到浏览器控制台
• 点击页面中输入框以外的任意元素
• 按下测试文本里包含的所有字母、大写字母和符号（确保每个字符的事件都被捕获）
• 在控制台输入run()执行重放

无效的自定义KeyboardEvent代码 #

vTest = new KeyboardEvent('keydown', 
    {
        key:"t", 
        keyCode:84, 
        isComposing: true, 
        view:window
    });
document.getElementsByClassName("letters")[0].dispatchEvent(vTest)

可能的失效原因 #

• 真实事件包含更多依赖属性：你捕获的真实键盘事件有很多默认属性，比如which、charCode、location、repeat等，网站的输入校验逻辑可能依赖这些你没设置的属性，自定义事件缺少这些就无法被识别。
• 事件链不完整：真实用户输入会触发keydown→keypress→keyup的完整事件流，而你只触发了keydown单个事件，网站可能监听了多个事件才判定为有效输入。
• 默认行为未触发：真实键盘事件会自动触发输入框的字符输入默认行为，而自定义事件不会，即使事件被分发，也不会产生实际的输入效果，网站自然不会响应。
• 事件属性不匹配：真实事件的bubbles、cancelable等属性默认是true，而你自定义的事件如果没显式设置这些，可能导致事件无法正确冒泡到网站的监听逻辑中。

内容的提问来源于stack exchange，提问作者Raevhaal