document.createEvent如何与键盘事件配合工作？

Question

我正在尝试在Web应用程序中模拟按键，这是为嵌入式系统设计的，但它使用了一个基于Webkit的浏览器。我已经在Chrome中测试了代码，并获得了相同的错误。

我尝试使用来自Yahoo的示例代码片段，但是当使用dispatchEvent触发事件时，我一直得到相同的错误。 "target"是DOM树中的HTML元素。

function fireEvent(target) {
    var evt = document.createEvent("UIEvent");
    evt.initEvent("keypress", true, true);
    target.dispatchEvent(evt);
}

它总是抛出以下异常：

"Error: UNSPECIFIED_EVENT_TYPE_ERR: DOM Events Exception 0"

我已经尝试使用 createEvent("Events")，但无论在嵌入式系统或Chrome中都会导致相同的异常。

- Ernelli

---

调用dispatchEvent是否缺少了evt参数？ - Phrogz

Answer 1

好的，在进行进一步测试时，似乎当所有关键事件参数正确初始化时，dispatchEvent 就可以正常工作而不会触发异常。

以下代码可行。

function fireEvent(target) {
    var evt = document.createEvent("Events");
    evt.initEvent("keypress", true, true);

    evt.view = window;
    evt.altKey = false;
    evt.ctrlKey = false;
    evt.shiftKey = false;
    evt.metaKey = false;
    evt.keyCode = 0;
    evt.charCode = 'a';

    target.dispatchEvent(evt);
}

- Ernelli

Answer 2

按键事件是一个 UIEvent。你应该使用 initUIEvent('type', bubbles, cancelable, windowObject, detail) 而不是 initEvent()。但对于实现了 keyEvents 的 Firefox，你应该创建一个 KeyEvents 并使用 initKeyEvents()。

- Nicole Hu

Answer 3

这是一个旧的帖子，为了更新它，我添加了另一个答案，以便更容易理解。

initEvent()已经被弃用虽然在某些浏览器中仍然支持，但应避免使用它。

有更好的简洁方式来创建事件，如下所示：

  function fireEvent(target) {
   var event = new Event('build');

   // Listen for the event.
   target.addEventListener('build', function (e) { ... }, false);

   // Dispatch the event.
    target.dispatchEvent(event);
}

为了向事件对象添加更多数据，存在CustomEvent接口，可以使用detail属性传递自定义数据。 例如，可以按以下方式创建事件：

var event = new CustomEvent('build', { 'detail': target.dataset.time });

参考资料：创建和触发事件

- Shad