如何在茉莉花单元测试中触发元素的keydown

【问题标题】：How to trigger keydown on an element in jasmine unit test如何在茉莉花单元测试中触发元素的keydown
【发布时间】：2020-12-10 10:36:02
【问题描述】：

我正在为接收“keydown”事件的函数编写 jasmine 单元测试。这只是一个普通的 javascript（不使用任何框架）

var event = document.createEvent('Event');
event.keyCode = 84; 
event.initEvent('keydown');
event.target = $('#selector');
myFunction(event);

当我在 myFunction 中控制台记录事件时这是我得到的：

{"returnValue":true,"timeStamp":1607595872162,"eventPhase":0,"target":null,"defaultPrevented":false,"srcElement":null,"type":"keydown","cancelable":false,"currentTarget":null,"bubbles":false,"cancelBubble":false,"keyCode":84}

“目标”属性为空

如何设置目标值？请帮忙

【问题讨论】：

标签： javascript jasmine gruntjs typescript

【解决方案1】：

您似乎正在寻找dispatch the event you created。我链接的 MDN 文章指出target 参数用于在事件中初始化target。在你的情况下，我会做这样的事情：

var event = document.createEvent('Event');
event.keyCode = 84; 
event.initEvent('keydown');
$('#selector')[0].dispatchEvent(event);

这假设您已通过以下方式将myFunction 绑定到#selector 的keydown 事件：

document.getElementById("selector").addEventListener('keydown', myFunction);

或

$('#selector').on('keydown', myFunction);

如果您没有将函数与事件侦听器绑定，则可以通过构建假事件对象并将该假事件传递给 myFunction 来利用 duck typing：

myFunction({
    type: 'keydown',
    keyCode: 84,
    target: $('#selector')[0]
});

【讨论】：