JS 模拟事件

DOM中的事件模拟
可以在 document 对象上使用 createEvent() 方法创建 event 对象。这个方法接收一个参数，即表示要创建的事件类型的字符串。在 DOM2 级中，所有这些字符串都使用英文复数形式，而在 DOM3级中都变成了单数。这个字符串可以使下列几个字符串之一.

UIEvents ：一般化的 UI 事件。鼠标事件和键盘事件都继承自 UI 事件。DOM3 级中是 UIEvent
MouseEvents ：一般化的鼠标事件。DOM3 级中是 MouseEvent 。
MutationEvents ：一般化的 DOM 变动事件。DOM3 级中是 MutationEvent 。
HTMLEvents ：一般化的 HTML 事件。没有对应的 DOM3 级事件（HTML 事件被分散到其他类别中）。

要注意的是，“DOM2 级事件”并没有专门规定键盘事件，后来的“DOM3 级事件”中才正式将其作为一种事件给出规定。IE9 是目前唯一支持 DOM3 级键盘事件的浏览器。不过，在其他浏览器中，在现有方法的基础上，可以通过几种方式来模拟键盘事件。
在创建了 event 对象之后，还需要使用与事件有关的信息对其进行初始化。每种类型的 event 对象都有一个特殊的方法，为它传入适当的数据就可以初始化该 event 对象。不同类型的这个方法的名字也不相同，具体要取决于 createEvent() 中使用的参数。
模拟事件的最后一步就是触发事件。这一步需要使用 dispatchEvent() 方法，所有支持事件的DOM 节点都支持这个方法。调用 dispatchEvent() 方法时，需要传入一个参数，即表示要触发事件的 event 对象。触发事件之后，该事件就跻身“官方事件”之列了，因而能够照冒泡并引发相应事件处理程序的执行。
1. 模拟鼠标事件
创建新的鼠标事件对象并为其指定必要的信息，就可以模拟鼠标事件。创建鼠标事件对象的方法是为 createEvent() 传入字符串 “MouseEvents” 。返回的对象有一个名为 initMouseEvent() 方法，用于指定与该鼠标事件有关的信息。这个方法接收 15 个参数，分别与鼠标事件中每个典型的属性一一对应；这些参数的含义如下。

type （字符串）：表示要触发的事件类型，例如 “click” 。
bubbles （布尔值）：表示事件是否应该冒泡。为精确地模拟鼠标事件，应该把这个参数设置为true 。
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 对象传给 dispatchEvent() 方法时，这个对象的 target属性会自动设置。下面，我们就通过一个例子来了解如何模拟对按钮的单击事件。

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

在兼容 DOM 的浏览器中，也可以通过相同的方式来模拟其他鼠标事件（例如 dblclick ）。
2. 模拟键盘事件
DOM3 级规定，调用 createEvent() 并传入 “KeyboardEvent” 就可以创建一个键盘事件。返回的事件对象会包含一个 initKeyEvent() 方法，这个方法接收下列参数。

type （字符串）：表示要触发的事件类型，如 “keydown”
bubbles （布尔值）：表示事件是否应该冒泡。为精确模拟鼠标事件，应该设置为 true 。
cancelable （布尔值）：表示事件是否可以取消。为精确模拟鼠标事件，应该设置为 true 。
view （ AbstractView ）：与事件关联的视图。这个参数几乎总是要设置为 document.defaultView 。
key （布尔值）：表示按下的键的键码。
location （整数）：表示按下了哪里的键。0 表示默认的主键盘，1 表示左，2 表示右，3 表示数字键盘，4 表示移动设备（即虚拟键盘），5 表示手柄。
modifiers （字符串）：空格分隔的修改键列表，如 “Shift” 。
repeat （整数）：在一行中按了这个键多少次。

由于DOM3级不提倡使用 keypress 事件，因此只能利用这种技术来模拟 keydown 和 keyup 事件。