JS模块29 DOM事件模拟

最新推荐文章于 2025-10-15 12:05:01 发布

原创最新推荐文章于 2025-10-15 12:05:01 发布 · 378 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript 专栏收录该内容

94 篇文章

订阅专栏

本文探讨了如何在JavaScript中模拟按钮的单击事件及键盘事件。通过构造函数详细介绍了模拟事件的过程，并提供了相关参考资源，包括MSDN的MouseEvent()、dispatchEvent()以及KeyboardEvent()方法，帮助开发者深入理解并实现事件模拟。

模拟按钮的单击事件

const btn = document.querySelector('.logo');
const event = new MouseEvent('click', {
  bubbles:true,
  cancelable:true,
  view:window
});

btn.dispatchEvent(event)

具体的参数参考这里。

同样的，模拟键盘事件应该使用KeyboardEvent构造函数

event = new KeyboardEvent(typeArg, KeyboardEventInit);

模拟键盘事件的例子

const event = new KeyboardEvent('keydown', {
  altKey: true,
  bubbles: true,
  cancelable: true,
  code: 'KeyK',
  composed: true,
  ctrlKey: true,
  key: 'k',
  metaKey: true,
  repeat: true,
  shiftKey: true,
  view: window
})

document.addEventListener('keydown', (e) =>{
    console.log(e.key)
})

document.dispatchEvent(event);
// k