javascript基础学习系列二百八十六：DOM 事件模拟

任何时候，都可以使用 document.createEvent()方法创建一个 event 对象。这个方法接收一个 参数，此参数是一个表示要创建事件类型的字符串。在 DOM2 中，所有这些字符串都是英文复数形式，
但在 DOM3 中，又把它们改成了英文单数形式。可用的字符串值是以下值之一。 22
"UIEvents"(DOM3 中是"UIEvent"):通用用户界面事件(鼠标事件和键盘事件都继承自这 个事件)。

 “MouseEvents”(DOM3 中是"MouseEvent"):通用鼠标事件。
 “HTMLEvents”(DOM3 中没有):通用 HTML 事件(HTML 事件已经分散到了其他事件大类中)。 注意，键盘事件不是在 DOM2 Events 中规定的，而是后来在 DOM3 Events 中增加的。 24
创建 event 对象之后，需要使用事件相关的信息来初始化。每种类型的 event 对象都有特定的方法， 可以使用相应数据来完成初始化。方法的名字并不相同，这取决于调用 createEvent()时传入的参数。 事件模拟的最后一步是触发事件。为此要使用 dispatchEvent()方法，这个方法存在于所有支持
事件的 DOM 节点之上。dispatchEvent()方法接收一个参数，即表示要触发事件的 event 对象。调 用 dispatchEvent()方法之后，事件就“转正”了，接着便冒泡并触发事件处理程序执行。

1. 模拟鼠标事件

模拟鼠标事件需要先创建一个新的鼠标 event 对象，然后再使用必要的信息对其进行初始化。要 创建鼠标 event 对象，可以调用 createEvent()方法并传入"MouseEvents"参数。这样就会返回一 个 event 对象，这个对象有一个 initMouseEvent()方法，用于为新对象指定鼠标的特定信息。 initMouseEvent()方法接收 15 个参数，分别对应鼠标事件会暴露的属性。这些参数列举如下。
27  bubbles(布尔值):表示事件是否冒泡。为精确模拟鼠标事件，应该设置为 true。 28
 type(字符串):要触发的事件类型，如"click"。
 cancelable(布尔值):表示事件是否可以取消。为精确模拟鼠标事件，应该设置为 true。  view(AbstractView):与事件关联的视图。基本上始终是 document.defaultView。
 detail(整数):关于事件的额外信息。只被事件处理程序使用，通常为 0。
 screenX(整数):事件相对于屏幕的 x 坐标。
 screenY(整数):事件相对于屏幕的 y 坐标。
 clientX(整数):事件相对于视口的 x 坐标。
 clientY(整数):事件相对于视口的 y 坐标。
 ctrlkey(布尔值):表示是否按下了 Ctrl 键。默认为 false。  altkey(布尔值):表示是否按下了 Alt 键。默认为 false。
 shiftkey(布尔值):表示是否按下了 Shift 键。默认为 false。  metakey(布尔值):表示是否按下了 Meta 键。默认为 false。  button(整数):表示按下了哪个按钮。默认为 0。
 relatedTarget(对象):与事件相关的对象。只在模拟 mouseover 和 mouseout 时使用。
显然，initMouseEvent()方法的这些参数与鼠标事件的 event 对象属性是一一对应的。前 4 个 参数是正确模拟事件唯一重要的几个参数，这是因为它们是浏览器要用的，其他参数则是事件处理程序 要用的。event 对象的 target 属性会自动设置为调用 dispatchEvent()方法时传入的节点。下面来 看一个使用默认值模拟单击事件的例子:

   let btn = document.getElementById("myBtn");
// 创建 event 对象
let event = document.createEvent("MouseEvents");
// 初始化 event 对象
event.initMouseEvent("click", true, true, document.defaultView,
                         0, 0, 0, 0, 0, false, false, false, false, 0, null);
// 触发事件 btn.dispatchEvent(event);

所有鼠标事件，包括 dblclick 都可以像这样在 DOM 合规的浏览器中模拟出来。

2. 模拟键盘事件

如前所述，DOM2 Events 中没有定义键盘事件，因此模拟键盘事件并不直观。键盘事件曾在 DOM2 Events 的草案中提到过，但最终成为推荐标准前又被删掉了。要注意的是，DOM3 Events 中定义的键盘 事件与 DOM2 Events 草案最初定义的键盘事件差别很大。
在 DOM3 中创建键盘事件的方式是给 createEvent()方法传入参数"KeyboardEvent"。这样会 返回一个 event 对象，这个对象有一个 initKeyboardEvent()方法。这个方法接收以下参数。
 type(字符串):要触发的事件类型，如"keydown"。
 bubbles(布尔值):表示事件是否冒泡。为精确模拟键盘事件，应该设置为 true。
 cancelable(布尔值):表示事件是否可以取消。为精确模拟键盘事件，应该设置为 true。  view(AbstractView):与事件关联的视图。基本上始终是 document.defaultView。
 key(字符串):按下按键的字符串代码。

 modifiers(字符串):空格分隔的修饰键列表，如"Shift"。
 repeat(整数):连续按了这个键多少次。

注意，DOM3 Events 废弃了 keypress 事件，因此只能通过上述方式模拟 keydown 和 keyup 事件:

let textbox = document.getElementById("myTextbox"),
    event;
// 按照 DOM3 的方式创建 event 对象
if (document.implementation.hasFeature("KeyboardEvents", "3.0")) {
   event = document.createEvent("KeyboardEvent");
// 初始化 event 对象
event.initKeyboardEvent("keydown", true, true, document.defaultView, "a",
                           0, "Shift", 0);
}
// 触发事件 textbox.dispatchEvent(event);

模拟事件

 location(整数):按下按键的位置。0 表示默认键，1 表示左边，2 表示右边，3 表示数字键盘， 15 4 表示移动设备(虚拟键盘)，5 表示游戏手柄。
这个例子模拟了同时按住 Shift 键和键盘上 A 键的 keydown 事件。在使用 document.create Event(“KeyboardEvent”)之前，最好检测一下浏览器对 DOM3 键盘事件的支持情况，其他浏览器会 返回非标准的 KeyboardEvent 对象。
Firefox 允许给 createEvent()传入"KeyEvents"来创建键盘事件。这时候返回的 event 对象包 含的方法叫 initKeyEvent()，此方法接收以下 10 个参数。
 type(字符串):要触发的事件类型，如"keydown"。
 bubbles(布尔值):表示事件是否冒泡。为精确模拟键盘事件，应该设置为 true。
 cancelable(布尔值):表示事件是否可以取消。为精确模拟键盘事件，应该设置为 true。
 view(AbstractView):与事件关联的视图，基本上始终是 document.defaultView。
 ctrlkey(布尔值):表示是否按下了 Ctrl 键。默认为 false。
 altkey(布尔值):表示是否按下了 Alt 键。默认为 false。
 shiftkey(布尔值):表示是否按下了 Shift 键。默认为 false。
 metakey(布尔值):表示是否按下了 Meta 键。默认为 false。
 keyCode(整数):表示按下或释放键的键码。在 keydown 和 keyup 中使用。默认为 0。
 charCode(整数):表示按下键对应字符的 ASCII 编码。在 keypress 中使用。默认为 0。