# 事件-模拟事件

事件就是为了表示网页中某个有意义的时刻。通常,事件都是由用户交互或浏览器功能触发。事实上,可能很少有人知道可以通过 JavaScript 在任何时候触发任意事件,而这些事件会被当成浏览器创建的事件。

# DOM 事件模拟

任何时候,都可以使用 document.createEvent()方法创建一个 event 对象。这个方法接收一个参数,此参数是一个表示要创建事件类型的字符串。

在 DOM2 中,所有这些字符串都是英文复数形式,但在 DOM3 中,又把它们改成了英文单数形式。可用的字符串值是以下值之一。

  • UIEvents / UIEvent
  • MouseEvents / MouseEvent
  • HTMLEvents / (DOM3 中没有)

# 模拟鼠标事件

const btn = document.getElementById("btn")
let event = document.createEvent("MouseEvents");
event.initMouseEvent("click", true, true, document.defaultView,
0, 0, 0, 0, false, false, false, false, false, 0, null);
btn.dispatchEvent(event)

# 模拟键盘事件

下面这个例子模拟了同时按住 Shift 键和键盘上 A 键的 keydown 事件

const text = document.getElementById("textBox")
let event = document.createEvent("KeyEvents");
event.initMouseEvent("keydown", true, true, document.defaultView,
false, false, true, false, 65, 65);
text.dispatchEvent(event)

# 模拟其他事件

这个例子模拟了在给定目标上触发 focus 事件。其他 HTML 事件也可以像这样来模拟。

const target = document.getElementById("input")
let event = document.createEvent("HTMLEvents");
event.initEvent("focus", true, false);
target.dispatchEvent(event);

# 自定义 DOM 事件

参考 CustomEvent